/* Web fonts — must be the first rule so the browser fetches them early. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =============================================================================
   style.css — shared portfolio rule set (theme-agnostic)
   =============================================================================
   Rules common to the light (portfolio.scss) and dark (portfolio-dark.scss)
   themes live here so they exist in one place. Everything themed is consumed as
   a CSS custom property (var(--pf-*) / var(--st-*)); each theme's .scss defines
   those tokens in its :root block and keeps only its theme-specific residue.

   CONTENTS
     1.  Selection + scrollbar
     2.  Base Typography
     3.  Navbar
     4.  Home Hero
     5.  Featured Project Cards
     6.  CTA Buttons
     7.  Article / Project Page Layout (+ breadcrumbs)
     8.  Sidebar
     9.  About / Content Tables
     10. HR & Footer
     11. Code Blocks, Inline Code, Highlight & Nav Tools
     12. DataFrame & Cell Outputs
     13. Captions, Descriptions, Meta & References
     14. Listing Cards
     15. Listing Filter / Sort Controls
     16. Keyframe Animations & Frames
     17. Responsive
   ============================================================================= */


/* 1. Selection + scrollbar ============================================== */

::selection {
    background-color: var(--pf-selection-bg);
    color: var(--pf-text-strong);
}

/* Scrollbar — Chrome / Edge / Safari */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--pf-primary);
    border-radius: 999px;
    border: 2px solid var(--pf-bg);
}
/* Scrollbar — Firefox */
* {
    margin: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--pf-primary) transparent;
}


/* 2. Base Typography ===================================================== */

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--pf-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    background-color: var(--pf-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--pf-text-strong);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
h1 { font-size: calc(1.8rem  + 0.6vh); font-weight: 700; }
h2 { font-size: calc(1.5rem  + 0.6vh); font-weight: 600; }
h3 { font-size: calc(1.35rem + 0.6vh); font-weight: 600; }
h4 { font-size: calc(1.15rem + 0.6vh); font-weight: 600; }

p { margin-bottom: 1rem; }

a {
    color: var(--pf-primary);
    text-decoration-color: transparent;
    transition: color 0.15s, text-decoration-color 0.15s;
    overflow-wrap: break-word;
}
a:hover {
    color: var(--pf-primary-hover);
    text-decoration-color: var(--pf-primary-hover);
}


/* 3. Navbar ============================================================== */

.navbar {
    border-bottom: 1px solid var(--pf-border);
    background-color: var(--pf-navbar-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--pf-navbar-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* terminal prompt before brand name */
.navbar-brand {
    font-family: var(--pf-mono);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--pf-text-strong) !important;
    letter-spacing: -0.04em;
    display: flex;
    align-items: center;
    gap: 0;
}
.navbar-brand:hover { color: var(--pf-primary) !important; }

.navbar-title::before {
    content: '>_';
    font-family: var(--pf-mono);
    color: var(--pf-primary);
    font-weight: 400;
    letter-spacing: -0.04em;
    margin-right: 0.5em;
}

.navbar-nav .nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--pf-text-secondary) !important;
    padding: 0.35rem 0.75rem;
    border-radius: var(--pf-radius-sm);
    transition: color 0.15s, background 0.15s;
    position: relative;
}
/* animated underline indicator */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pf-gradient);
    transition: width 0.22s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:focus-visible::after,
.navbar-nav .nav-link.show::after { width: calc(100% - 1.5rem); }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.show {
    color: var(--pf-primary) !important;
    background-color: var(--pf-primary-light);
}

/* Dropdown parents keep the same underline treatment as other first-level
   links. The indicator is separate so it stays on the button's right edge. */
.navbar-nav .nav-link.dropdown-toggle {
    padding-right: 1.5rem;
}
.navbar-nav .nav-link.dropdown-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.7rem;
    width: 0;
    height: 0;
    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transform: translateY(-20%);
}
.navbar-nav .nav-link.dropdown-toggle.show::before {
    transform: translateY(-20%) rotate(180deg);
}
.navbar-nav .nav-link.dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background: var(--pf-gradient);
    transform: translateX(-50%);
    transition: width 0.22s ease;
}
.navbar-nav .nav-link.dropdown-toggle:hover::after,
.navbar-nav .nav-link.dropdown-toggle.active::after,
.navbar-nav .nav-link.dropdown-toggle:focus-visible::after,
.navbar-nav .nav-link.dropdown-toggle.show::after {
    width: calc(100% - 1.5rem);
}

.navbar-toggler {
    color: transparent;
}
.navbar-toggler-icon {
    background-image: var(--pf-navbar-toggler-icon);
}

/* Quarto listings can still emit inherited sidebar breadcrumbs and pagination
   even when their page-level navigation flags are disabled. */
body.media-gallery-page .quarto-page-breadcrumbs,
body.media-gallery-page .page-navigation {
    display: none !important;
}

/* Desktop: Margin between Nav Right and Nav Tools */
@media (min-width: 992px) {
    .navbar .quarto-navbar-tools {
        margin-left: 1rem;
    }
}

/* Search cancel button — keep on one line */
button.aa-DetachedCancelButton { flex: 0 0 auto; white-space: nowrap; }


/* 4. Home Hero =========================================================== */

body:not(.quarto-sidebar-visible) .quarto-title-block {
    padding: 1rem 0 0;
    border-bottom: none;
    position: relative;
}

#title-block-header {
    padding: 0;
    margin: 0 0 2rem;
}

/* gradient animated title on the home page */
body:not(.quarto-sidebar-visible) .quarto-title h1.title {
    font-size: calc(1.8rem + 0.6vh);
    font-weight: 700;
    margin-bottom: 0.4rem;
    background: var(--pf-gradient-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-pan 5s ease infinite;
    letter-spacing: -0.02em;
}
/* typing cursor appended to the title */
body:not(.quarto-sidebar-visible) .quarto-title h1.title::after {
    content: '|';
    -webkit-text-fill-color: var(--pf-primary-mid);
    font-weight: 300;
    margin-left: 2px;
    animation: blink-cursor 1.1s step-end infinite;
}

/* On pages with a rotating subtitle, the cursor follows the typed text. */
body.subtitle-typing-active .quarto-title h1.title::after {
    content: none;
}

body:not(.quarto-sidebar-visible) .quarto-title p.subtitle {
    font-family: var(--pf-mono);
    font-size: 0.95rem;
    color: var(--pf-text-secondary);
    font-weight: 400;
    letter-spacing: 0.01em;
    opacity: 0.85;
    margin: 1rem 0 0;
}
/* "# " comment prefix on the subtitle */
body:not(.quarto-sidebar-visible) .quarto-title p.subtitle::before {
    content: '# ';
    color: var(--pf-primary-mid);
    font-weight: 600;
}

body.subtitle-typing-active .quarto-title p.subtitle-typewriter {
    min-height: 1.5em;
}

body.subtitle-typing-active .quarto-title p.subtitle-typewriter::after {
    content: '|';
    color: var(--pf-primary-mid);
    font-weight: 300;
    margin-left: 2px;
    animation: blink-cursor 1.1s step-end infinite;
}

body.subtitle-typing-active .quarto-title p.subtitle-typewriter.is-reduced-motion {
    white-space: pre-line;
}

body.subtitle-typing-active .quarto-title p.subtitle-typewriter.is-reduced-motion::after {
    content: none;
    animation: none;
}

p.subtitle.lead { margin: 1rem 0; }

/* intro paragraph below the title block */
.intro {
    font-size: 1.05rem;
    color: var(--pf-text-secondary);
    line-height: 1.7;
    margin-top: 0;
}

/* "Featured Projects" heading */
#featured-projects { margin-top: 2.5rem; }
#featured-projects h2,
h2#featured-projects {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--pf-text-muted);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pf-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* bar accent before the section heading */
#featured-projects h2::before,
h2#featured-projects::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 0.9em;
    background: var(--pf-gradient);
    border-radius: 2px;
    flex-shrink: 0;
}


/* 5. Featured Project Cards ============================================== */

.featured-card {
    background: var(--pf-card);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.4rem 1.5rem 1.4rem 1.75rem;
    box-shadow: var(--pf-shadow);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    animation: fade-up 0.4s ease both;
}
/* teal left-border accent — appears on hover */
.featured-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pf-gradient);
    opacity: 0;
    transition: opacity 0.22s ease;
    border-radius: var(--pf-radius) 0 0 var(--pf-radius);
}
/* subtle top-right corner glow */
.featured-card::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--pf-card-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.featured-card:hover {
    box-shadow: var(--pf-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--pf-primary-border);
}
.featured-card:hover::before { opacity: 1; }
.featured-card:hover::after  { opacity: 1; }

/* description text */
.featured-card p {
    font-size: 0.88rem;
    color: var(--pf-text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* tech badge tags (backtick `Python`) */
.featured-card code {
    font-family: var(--pf-mono);
    font-size: 0.70rem;
    font-weight: 500;
    background: var(--pf-primary-light);
    color: var(--pf-primary-hover);
    letter-spacing: 0.02em;
    border: 1px solid var(--pf-primary-border-soft);
    transition: background 0.15s, color 0.15s;
}
.featured-card code:hover {
    background: var(--pf-primary-tint);
    color: var(--pf-primary-hover);
}

/* project title link */
.featured-card > p:first-child a,
.featured-card p:first-child strong a,
.featured-card a strong {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--pf-text-strong);
    text-decoration: none;
    transition: color 0.15s;
}
.featured-card > p:first-child a:hover,
.featured-card p:first-child strong a:hover,
.featured-card a strong:hover {
    color: var(--pf-primary);
    text-decoration: none;
}

.grid { gap: 1rem; margin-top: 0.25rem; }


/* 6. CTA Buttons ========================================================= */

.btn-primary,
.btn-outline-primary {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.6rem 1.45rem;
    border-radius: var(--pf-radius-sm);
}

.btn-primary {
    background: var(--pf-gradient) !important;
    background-size: 200% auto !important;
    border: none !important;
    color: var(--pf-on-primary) !important;
    transition: background-position 0.4s ease, box-shadow 0.15s, transform 0.15s;
    box-shadow: var(--pf-btn-shadow);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover,
.btn-primary:focus {
    background-position: right center !important;
    box-shadow: var(--pf-glow) !important;
    transform: translateY(-1px);
    color: var(--pf-on-primary) !important;
}

.btn-outline-primary {
    border: 1.5px solid var(--pf-primary) !important;
    color: var(--pf-primary) !important;
    background-color: transparent !important;
    transition: background-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--pf-primary) !important;
    color: var(--pf-on-primary) !important;
    box-shadow: var(--pf-glow) !important;
    transform: translateY(-1px);
}


/* 7. Article / Project Page Layout ====================================== */

.quarto-title-block { border-bottom: 1px solid var(--pf-border); }

.quarto-title h1.title { font-weight: 700; }

/* author / date meta */
.quarto-title-meta {
    font-size: 0.82rem;
    color: var(--pf-text-muted);
}
.quarto-title-meta-heading {
    font-weight: 600;
    color: var(--pf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}
/* author meta data flex (for multiple authors) */
.quarto-title-meta div:first-child .quarto-title-meta-contents {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.6rem;
}
.quarto-title-meta div:first-child .quarto-title-meta-contents p {
    flex: 0 0 auto;
}

/* don't stamp the external-link icon onto image links */
a.external:has(img)::after,
a.external.btn::after,
a.external[data-image-link]::after { content: none; }

/* title block category pills */
.quarto-title .quarto-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
}
.quarto-title .quarto-categories .quarto-category {
    font-family: var(--pf-mono);
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--pf-primary-light);
    color: var(--pf-primary-hover) !important;
    border-radius: var(--pf-radius-sm);
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--pf-primary-border-mid);
    transition: background 0.15s;
    display: flex;
}
/* when the category wraps a link, let the <a> carry the padding instead */
.quarto-title .quarto-categories .quarto-category:has(a) { padding: 0; }
.quarto-title .quarto-categories .quarto-category:hover { background: var(--pf-primary-tint); }
.quarto-title .quarto-categories .quarto-category a      { padding: 0.1rem 0.5rem; }

/* article section headings — teal bar accent */
.quarto-title-block ~ section h2,
#quarto-document-content h2 {
    margin-top: 2rem;
    padding-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.quarto-title-block ~ section h2::before,
#quarto-document-content h2::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background: var(--pf-gradient);
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.7;
}
#quarto-document-content h3 { margin-top: 1.5rem; }

/* Section Number */
.header-section-number {
    color: var(--pf-text-muted);
}

/* Figure outer div: allow rem widths and keep center alignment */
.quarto-float.quarto-figure.quarto-figure-center.anchored { width: 100% !important; }

/* Breadcrumbs */
nav .breadcrumb,
nav .quarto-page-breadcrumbs {
    margin: 0;
    padding: 0 0 0.5rem;
    background-color: transparent;
    color: var(--pf-primary);
}
nav .breadcrumb .breadcrumb-item,
nav .breadcrumb .breadcrumb-item a,
nav .quarto-page-breadcrumbs .breadcrumb-item,
nav .quarto-page-breadcrumbs .breadcrumb-item a {
    color: var(--pf-primary);
    font-size: 0.8rem;
}
nav .breadcrumb .breadcrumb-item::before,
nav .quarto-page-breadcrumbs .breadcrumb-item::before { color: var(--pf-text-muted); }

/* Sidebar toggle button on breadcrumb */
.btn.quarto-btn-toggle:active {
    border-color: transparent;
}


/* 8. Sidebar ============================================================= */

#quarto-sidebar {
    background-color: var(--pf-surface) !important;
    border-right: 1px solid var(--pf-border) !important;
    font-size: 0.7rem;
}

/* sidebar section (level 1) */
.sidebar-item-container .sidebar-section,
.sidebar-menu-container .list-unstyled > .sidebar-item {
    margin: 0.6rem 0 0.2rem;
}

/* sidebar item (level 2 / submenu) */
.sidebar-menu-container .sidebar-section .sidebar-section-item,
.sidebar .sidebar-section > .sidebar-item,
.quarto-sidebar .sidebar-section-item {
    font-family: var(--pf-mono);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--pf-text-muted);
    padding: 0 1rem 0.25rem;
    margin: 0.4rem 0 0;
}

.sidebar-item-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--pf-text-secondary);
    transition: color 0.15s;
}

/* Section header title shrinks to content width so the rest of the row is
   empty and toggles the section on click; leaf items stay full-width nav targets. */
.sidebar-item-section > .sidebar-item-container > .sidebar-item-text { width: auto; }

.sidebar-item-container .sidebar-link:hover .sidebar-item-text { color: var(--pf-primary); }

/* active state */
div.sidebar-item-container .active,
div.sidebar-item-container .show > .nav-link,
div.sidebar-item-container .sidebar-link > code,
a.sidebar-item-text.sidebar-link.active > .menu-text { color: var(--pf-primary); }
div.sidebar-item-container .active .sidebar-item-text,
a.sidebar-item-text.sidebar-link.active > .menu-text {
    color: var(--pf-primary) !important;
    font-weight: 500;
}

/* Sidebar search trigger (replaces non-functional duplicate #quarto-search) */
.sidebar-search-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
    background: var(--pf-search-trigger-bg);
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.sidebar-search-trigger span { flex: 1; text-align: left; }
.sidebar-search-trigger kbd {
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--pf-border);
    border-radius: 3px;
    background: var(--pf-kbd-bg);
    color: var(--pf-text-muted);
    line-height: 1.4;
}
.sidebar-search-trigger:hover {
    border-color: var(--pf-primary);
    color: var(--pf-text);
}

/* Desktop: Sidebar layout (site-tools on bottom) */
/* site-tools: reproduce this project, change log, about */
@media (min-width: 992px) {
    /* Height controls margin of bottom sections */
    div.sidebar-menu-container {
        height: 100%;
    }
    div.sidebar-menu-container > ul {
        display: flex;
        flex-direction: column;
        height: 95%;
    }
    /* last 3 items to the bottom */
    div.sidebar-menu-container > ul > li.sidebar-item:nth-last-child(3) {
        margin-top: auto;
        padding-top: .6rem;
    }
}


/* 9. About / Content Tables =========================================== */

.quarto-document-content table:not(.dataframe),
#quarto-document-content table:not(.dataframe) {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    border-radius: var(--pf-radius);
    overflow: hidden;
    box-shadow: var(--pf-shadow);
}
.quarto-document-content table:not(.dataframe) thead tr,
#quarto-document-content table:not(.dataframe) thead tr {
    background: var(--pf-table-head-bg);
    color: var(--pf-text-strong);
}
.quarto-document-content table:not(.dataframe) th,
#quarto-document-content table:not(.dataframe) th {
    padding: 0.65rem 0.9rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    border-bottom: 2px solid var(--pf-table-head-border);
    text-align: left;
}
.quarto-document-content table:not(.dataframe):not(.card-other-values) td,
#quarto-document-content table:not(.dataframe):not(.card-other-values) td {
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--pf-border);
    color: var(--pf-text-secondary);
}
.quarto-document-content table:not(.dataframe) tbody tr:hover,
#quarto-document-content table:not(.dataframe) tbody tr:hover { background-color: var(--pf-row-hover); }

/* Quarto Callouts */
.callout.callout-style-default {
    border-left-width: 3.5px;
}
.callout.callout-style-default .callout-body {
    padding: 0 0.7rem;
}


/* 10. HR & Footer ====================================================== */

hr {
    border: none;
    border-top: 1.2px solid var(--pf-border);
    margin: 2rem 0;
    opacity: 0.8;
}

.quarto-other-formats,
.nav-footer {
    font-size: 0.8rem;
    color: var(--pf-text-muted);
}
.nav-footer .toc-actions ul li {
    flex: 0 0 auto;
}
/* footer: subtle top gradient line */
.nav-footer {
    border-top: 2px solid transparent;
    background-image: linear-gradient(var(--pf-bg), var(--pf-bg)), var(--pf-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}


/* 11. Code Blocks, Inline Code, Highlight & Nav Tools =================== */

/* Code-tools / language dropdown menu */
.navbar .dropdown-menu.show {
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
    min-width: 0;
}
.navbar .dropdown-item {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    padding: .4em .8em;
}
.navbar .navbar-nav.me-auto > .nav-item.dropdown > .dropdown-menu[data-bs-popper] {
    left: 0.75rem !important;
    margin-top: 0.25rem;
}

/* Desktop navbar popovers share the same floating surface. Media items follow
   reading direction; the compact language choices remain centered. */
@media (min-width: 992px) {
    .navbar .navbar-nav.me-auto > .nav-item.dropdown >
    .dropdown-menu[aria-labelledby="nav-menu-media"] {
        padding: 0.45rem;
        border-radius: var(--pf-radius);
        box-shadow: var(--pf-shadow-hover);
        transform-origin: top left;
    }
    .navbar .navbar-nav.me-auto > .nav-item.dropdown >
    .dropdown-menu[aria-labelledby="nav-menu-media"][data-bs-popper] {
        margin-top: 0.55rem;
    }
    .navbar .dropdown-menu[aria-labelledby="nav-menu-media"] .dropdown-item {
        padding: 0.55rem 0.9rem;
        border-radius: var(--pf-radius-sm);
        text-align: left;
    }
    .navbar .quarto-navbar-tools
    .dropdown-menu[aria-labelledby="quarto-navigation-tool-dropdown-0"] {
        padding: 0.35em;
        border-radius: var(--pf-radius);
        box-shadow: var(--pf-shadow-hover);
        transform-origin: top center;
    }
    .navbar .quarto-navbar-tools
    .dropdown-menu[aria-labelledby="quarto-navigation-tool-dropdown-0"][data-bs-popper] {
        margin-top: 0.55rem;
    }
    .navbar .dropdown-menu[aria-labelledby="quarto-navigation-tool-dropdown-0"]
    .dropdown-item {
        padding: 0.3em 0.75em;
        border-radius: var(--pf-radius-sm);
        font-size: 0.9rem;
        text-align: center;
    }
}

/* Art galleries */
.art-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
}
.art-gallery-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow);
}
.art-gallery-item.is-filter-revealing {
    animation: fade-up 0.4s ease both;
    animation-delay: var(--art-reveal-delay, 0ms);
}
.art-gallery-item > p {
    margin: 0;
}
.art-gallery-item > p > br {
    display: none;
}
.art-gallery-item .lightbox {
    display: block;
    overflow: hidden;
    background: var(--pf-bg-muted);
}
.art-gallery-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.art-gallery-item .lightbox:hover .art-gallery-image,
.art-gallery-item .lightbox:focus-visible .art-gallery-image {
    transform: scale(1.025);
}
.art-gallery-caption {
    padding: 0.7rem 0.8rem 0.75rem;
    color: var(--pf-text-secondary);
    font-size: 0.88rem;
    line-height: 1.35;
}
.art-gallery-caption > p {
    margin: 0;
}
.art-gallery-title {
    color: var(--pf-text);
    font-weight: 600;
}
.art-gallery-title > p,
.art-gallery-date > p,
.art-gallery-categories > p {
    margin: 0;
}
.art-gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.45rem;
}
.art-gallery-date {
    color: var(--pf-text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}
.art-gallery-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}
.art-gallery-category {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--pf-primary-border-soft);
    border-radius: 5px;
    background: var(--pf-primary-light);
    color: var(--pf-primary-hover);
    font-family: var(--pf-mono);
    font-size: 0.65rem;
    font-weight: 500;
}
@media (max-width: 767.98px) {
    .art-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .art-gallery { grid-template-columns: 1fr; }
}

/* Music and video production galleries */
.music-video-gallery {
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.video-production-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.music-video-gallery > .is-filter-revealing {
    animation: fade-up 0.4s ease both;
    animation-delay: var(--music-reveal-delay, 0ms);
}
.music-video-card,
.video-production-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow);
}
.music-video-player,
.video-production-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    object-fit: contain;
}
.music-video-embed,
.video-production-embed {
    border: 0;
}
.music-video-card-body,
.video-production-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.55rem 1rem 1rem;
}
.music-video-title,
.video-production-title {
    margin: 0 !important;
    font-size: 1.05rem;
    line-height: 1.3;
}
.music-video-description,
.video-production-description {
    margin: 0.45rem 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--pf-text-secondary);
}
.music-video-meta,
.video-production-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--pf-text-muted);
    font-size: 0.82rem;
}
.music-video-instrument { color: var(--pf-primary); }
@media (max-width: 575.98px) {
    .video-production-gallery { grid-template-columns: 1fr; }
}

button#quarto-code-tools-menu, button#quarto-code-tools-source {
    padding: 0 .5rem;
    border-color: transparent;
}

/*  The lang dropdown lives inside #quarto-header (.fixed-top, z-index:1030) and
    can't escape that stacking context. On mobile the open sidebar (z-index:1055,
    a header sibling) would paint over it — fixed by lifting #quarto-header above
    the sidebar in the mobile media query at the bottom of this file. */

/* search button + nav tool color */
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon { fill: var(--pf-primary); }
.navbar .quarto-navbar-tools .quarto-navigation-tool                   { color: var(--pf-primary); }


/* Inline code + textual code */
.sourceCode.cell-code { position: relative; }
pre.text.cell-code code { color: var(--pf-primary-hover); }

*:not(pre) > code {
    color: var(--pf-code-inline-text);
    background-color: var(--pf-code-inline-bg) !important;
    padding: .2rem .35rem !important;
    white-space: break-spaces !important;
    overflow-wrap: break-word;
}

/* ==text== highlight → <mark> */
mark {
    background-color: var(--st-mark-bg);
    color: var(--pf-mark-text);
    -webkit-text-fill-color: initial;
    padding: 0.05em 0.2em;
    border-radius: 3px;
}

/* Code blocks — shared shell for source-input cells, plain-text output cells,
   and non-executable in-text code blocks. */
pre.sourceCode {
    font-size: var(--st-code-fs);
}
p code.sourceCode, li code.sourceCode, td code.sourceCode {
    background-color: transparent;
}
div:has(> .sourceCode.code-with-copy),
div.sourceCode.cell-code,
.cell-output-stdout pre,
.cell-output-display pre {
    background-color: var(--st-code-bg);
    border-radius: 6px;
    border-left: 3px solid var(--st-code-border);
    padding: 0.75rem 0;                 /* vertical padding */
    font-size: var(--st-code-fs);
    overflow-x: auto;
}
.cell-output-stdout pre,
.cell-output-display pre { color: var(--st-code-text); }

/* Inner element holds the horizontal padding so it stays inside scroll width */
div:has(> .sourceCode.code-with-copy) pre,
.sourceCode.cell-code pre,
.cell-output-stdout pre code,
.cell-output-display pre code {
    margin: 0;
    padding: 0 1rem;                    /* horizontal padding */
    width: fit-content;                 /* width tracks content length */
    min-width: 100%;                    /* short content still fills shell */
}
.cell-output-stdout pre code,
.cell-output-display pre code {
    display: block;
    background-color: transparent;
    box-sizing: border-box;
}

/* Code block with a filename header — reuse the in-text code shell, rendering
   the filename as a small label bar fused to the top of the code body. */
.code-with-filename .code-with-filename-file {
    margin-bottom: 0;
    padding: 0.15rem 0.8rem;
    background-color: var(--pf-code-filename-bg);
    border: none;
    border-left: 3px solid var(--st-code-border);
    border-bottom: 1px solid var(--pf-border);
    border-radius: 6px 6px 0 0;
}
.code-with-filename .code-with-filename-file pre {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
.code-with-filename .code-with-filename-file strong {
    font-weight: 600;
    font-size: var(--st-code-fs);
    color: var(--pf-text-secondary);
}
/* fuse the body to the header by dropping the body's top rounding */
.code-with-filename div:has(> .sourceCode.code-with-copy) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* TOC nav links */
#TOC .nav-link {
    font-size: 0.83rem;
    color: var(--pf-text-secondary);
    transition: color 0.15s, padding-left 0.15s;
}
#TOC .nav-link:hover,
#TOC .nav-link.active { color: var(--pf-primary); }
#TOC .nav-link.active {
    font-weight: 500;
    border-left: 2px solid var(--pf-primary);
}


/* 12. DataFrame & Cell Outputs ========================================= */

.cell-output-display {
    margin: 1rem 0;
    overflow-x: auto;                   /* scroll wide tables horizontally */
}
.cell-output-display table.dataframe {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
}
.cell-output-display table.dataframe thead tr {
    background-color: var(--st-df-head-bg);
    color: var(--pf-df-head-text);
}
.cell-output-display table.dataframe thead th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border: none;
}
.cell-output-display table.dataframe tr.odd,
.cell-output-display table.dataframe tr.even { background-color: var(--st-df-row); }
.cell-output-display table.dataframe td,
.cell-output-display table.dataframe th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--st-df-border);
}
.cell-output-display table.dataframe tbody tr:hover { background-color: var(--st-df-hover); }
.cell-output-display table.dataframe tbody th {     /* index column */
    color: var(--pf-text-muted);
    font-weight: normal;
    border-right: 1px solid var(--st-df-border);
}


/* 13. Captions, Descriptions, Meta & References ======================== */

/* Figure / output captions */
figcaption { text-align: center; }
figcaption,
.caption {
    margin-top: 0;
    font-style: italic;
    font-weight: normal;
    color: var(--pf-text-muted);
    font-size: 0.9em;
}
:is(p, div):has(>.caption:first-child) {
    text-align: center;
}

/* Output (code listing) captions.
   script-lst-caption-below (site-fixes.html) relocates the lst caption out of the
   <figure> to sit after the output/code, so it renders in normal flow below — no
   flex/order reversal. The caption is a direct child of the .listing element. */
.listing > figcaption.quarto-float-lst {
    margin: .35rem 0 .5rem;
    text-align: left;
}
figure.quarto-float-lst .cell-output.cell-output-stdout pre,
figure.quarto-float-lst div.sourceCode {
    margin: 0 0 .5em;
}
/* In the crossref hover preview (tippy, maxWidth 500) the listing output would
   overflow horizontally — plain output <pre> defaults to white-space:pre, unlike
   source code which wraps. Wrap it there so it reads like the main content. */
.tippy-content figure.quarto-float-lst .cell-output pre code {
    white-space: pre;
}
.tippy-content:has(figure.quarto-float-lst) figcaption {
    text-align: left;
}

/* Blockquote */
blockquote.blockquote {
    font-size: 0.9rem;
    color: var(--pf-text-secondary);
    border-left-color: var(--pf-border);
    padding: .5rem 0 .5rem 1rem;
}

/* Description */
div.description { font-size: 0.85rem; color: var(--pf-text-muted); }

/* Reading-time meta (src/includes/reading-meta.html) */
.reading-meta      { font-size: 0.85rem; color: var(--pf-text-muted); margin-bottom: 1rem; }
.reading-meta span { margin-right: 0.3rem; }

/* References — fix hanging-indent bibliography */
div#refs.hanging-indent            { margin-left: 0; }
div#refs.hanging-indent .csl-entry { margin-bottom: 0.5rem; }


/* 14. Listing Cards ==================================================== */

/* Card shell — mirrors .featured-card */
.quarto-grid-item.card {
    background: var(--pf-card);
    border: 1px solid var(--pf-border) !important;
    border-radius: var(--pf-radius) !important;
    padding: 1.4rem 1.5rem 1.4rem 1.75rem !important;
    box-shadow: var(--pf-shadow) !important;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    animation: fade-up 0.4s ease both;
}
/* teal left-border accent on hover */
.quarto-grid-item.card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--pf-gradient);
    border-radius: var(--pf-radius) 0 0 var(--pf-radius);
    opacity: 0;
    transition: opacity 0.22s ease;
}
/* corner glow on hover */
.quarto-grid-item.card::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, var(--pf-card-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.quarto-grid-item.card:hover {
    box-shadow: var(--pf-shadow-hover) !important;
    transform: translateY(-3px);
    border-color: var(--pf-primary-border) !important;
    text-decoration: none;
}
.quarto-grid-item.card:hover::before { opacity: 1; }
.quarto-grid-item.card:hover::after  { opacity: 1; }

/* stagger entrance */
.quarto-grid-item:nth-child(1) { animation-delay: 0.05s; }
.quarto-grid-item:nth-child(2) { animation-delay: 0.12s; }
.quarto-grid-item:nth-child(3) { animation-delay: 0.19s; }
.quarto-grid-item:nth-child(4) { animation-delay: 0.26s; }

/* Card body — strip Bootstrap card-body padding (handled by the shell) */
.quarto-grid-item .card-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.25rem;
}

/* Title */
.quarto-grid-item .listing-title {
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem;
    color: var(--pf-text-strong) !important;
    margin: 0 !important;
    line-height: 1.3;
    transition: color 0.15s;
}
.quarto-grid-item a:hover .listing-title,
.quarto-grid-item .listing-title a:hover { color: var(--pf-primary) !important; }
/* the anchor wrapping the title */
.quarto-grid-item .card-body > a {
    text-decoration: none;
    color: inherit;
}

/* Description */
.quarto-grid-item .listing-description {
    font-size: 0.88rem;
    color: var(--pf-text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* Card date attribution */
.card-attribution.card-text-small > .listing-date { flex: 0 0 auto; }
.card-attribution.card-text-small > div           { font-size: 0.65rem; }
.quarto-grid-item .card-attribution               { padding: 0; margin: 0; }

/* Category badges — mirror .featured-card code tags */
.quarto-grid-item .listing-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 auto;
    padding: 0.35rem 0 0.1rem;
}
.quarto-grid-item .listing-category {
    font-family: 'JetBrains Mono', menlo, 'Fira Code', monospace !important;
    font-size: 0.63rem !important;
    font-weight: 500 !important;
    background: var(--pf-primary-light) !important;
    color: var(--pf-primary-hover) !important;
    border-radius: 5px !important;
    padding: 0.02rem 0.35rem !important;
    border: 1px solid var(--pf-primary-border-soft) !important;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}
.quarto-grid-item .listing-category:hover { background-color: var(--pf-primary-tint) !important; }

/* Homepage categories are descriptive tags, not listing filters. */
#listing-home-listing .listing-category {
    pointer-events: none;
    cursor: default;
}


/* 15. Listing Filter / Sort Controls =================================== */

/* fix gap between the two action bars in mobile view */
.listing-actions-group { gap: 1rem; }

.input-group-sm > .form-control:hover,
.input-group-sm > .form-control:focus { border: 1px solid var(--pf-primary); }
.input-group-sm > .form-select:hover  { background-color: var(--pf-primary-light); }
.input-group-sm > .form-select:focus  { box-shadow: none; }

/* page-navigation: pagination page numbers */
.page-link.active,
.active > .page-link,
.page-link:hover {
    background-color: var(--pf-primary);
    border-color: var(--pf-primary);
    color: var(--pf-on-primary) !important;
    opacity: 1;
}
.page-link {
    background-color: var(--pf-primary);
    border-color: var(--pf-primary);
    color: var(--pf-on-primary) !important;
    opacity: 0.65;
    transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}

/* Filter pill buttons — shared shell for the category filter, post-type
   filter, and "show more" toggle (all render as outlined pill buttons). */
.quarto-listing-category .category,
#post-type-filter .type-btn,
#art-category-filter .type-btn,
#music-category-filter .type-btn,
.quarto-listing-category .category-show-more {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border: 1.5px solid var(--pf-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--pf-primary);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.quarto-listing-category .category:hover,
#post-type-filter .type-btn:hover,
#art-category-filter .type-btn:hover,
#music-category-filter .type-btn:hover,
.quarto-listing-category .category-show-more:hover {
    background: var(--pf-primary-light);
    color: var(--pf-primary-hover);
}
.quarto-listing-category .category.active,
#post-type-filter .type-btn.active,
#art-category-filter .type-btn.active,
#music-category-filter .type-btn.active {
    background: var(--pf-primary) !important;
    color: var(--pf-on-primary) !important;
    box-shadow: 0 0 0 3px var(--pf-primary-ring);
}

/* Category filter overrides Quarto's vertical sidebar styling (needs !important) */
.quarto-listing-category .category {
    padding: 0.1rem 0.5rem !important;
    border: 1.5px solid var(--pf-primary) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--pf-primary) !important;
}
.quarto-listing-category .category:not(.active):hover {
    background: var(--pf-primary-light) !important;
    color: var(--pf-primary-hover) !important;
}

/* Filter bar containers */
.quarto-listing-category,
#post-type-filter,
#art-category-filter,
#music-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    /* Keep the 3px active ring inside the bar's paint area. Negative outer
       margins preserve the original pill alignment and surrounding spacing. */
    padding: 3px;
    margin: -3px -3px calc(1.5rem - 3px);
    overflow: visible;
}
.quarto-listing-category {
    flex-direction: row !important;
    display: flex !important;
    padding: 3px !important;
    border: none !important;
}

/* The category listing lives in Quarto's margin sidebar. Keep that outer
   boundary from clipping the active pill's 3px ring. */
#quarto-margin-sidebar:has(.quarto-listing-category) {
    overflow: visible !important;
}

.quarto-listing-category-title {
    font-family: 'JetBrains Mono', menlo, 'Fira Code', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pf-text-muted);
    margin-bottom: 0.55rem;
}

/* show the "(N)" count badge with a small left margin */
.quarto-listing-category .category .quarto-category-count { margin-left: 0.2rem; }

/* "show more categories" toggle — dashed variant, hidden when not needed */
.quarto-listing-category .category-show-more { border-style: dashed; }
.quarto-listing-category .category-show-more[hidden] { display: none !important; }

/* Listing "no results" message */
.quarto-listing-no-matching {
    font-family: 'JetBrains Mono', menlo, 'Fira Code', monospace;
    font-size: 0.9rem;
    color: var(--pf-text-muted);
    padding: 2rem 0;
    text-align: center;
}
.quarto-listing-no-matching::before {
    content: '// ';
    color: var(--pf-primary-mid);
}

/* Post type — Quarto renders custom fields as a table. Keep only the value
   and align it like the author metadata at the card's bottom-right. */
.quarto-grid-item .card-other-values {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
    color: #6c757d;
}
.quarto-grid-item .card-other-values tbody,
.quarto-grid-item .card-other-values tr {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
}
.quarto-grid-item .card-other-values td:not(.post-type) {
    display: none;
}
.quarto-grid-item .card-other-values .post-type {
    display: block;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    text-transform: uppercase;
}


/* 16. Keyframe Animations & Frames ===================================== */

@keyframes gradient-pan {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
@keyframes blink-cursor {
    /* use visibility instead of opacity */
    0%, 100% { visibility: visible; }
    50%      { visibility: hidden; }
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* stagger the featured cards */
.g-col-12:nth-child(1) .featured-card, .featured-card:nth-child(1) { animation-delay: 0.05s; }
.g-col-12:nth-child(2) .featured-card, .featured-card:nth-child(2) { animation-delay: 0.12s; }
.g-col-12:nth-child(3) .featured-card, .featured-card:nth-child(3) { animation-delay: 0.19s; }
.g-col-12:nth-child(4) .featured-card, .featured-card:nth-child(4) { animation-delay: 0.26s; }


/* macOS window frame (wrap an image: ::: {.macbook-frame} … :::) ======== */
.macbook-frame {
    --mf-bar-h: 24px;                            /* title-bar height */
    position: relative;
    display: block;
    max-width: 100%;
    margin: 1.75rem auto;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pf-frame-bg);              /* title-bar surface */
    border: 1px solid var(--pf-frame-border);
    box-shadow: var(--pf-frame-shadow);
}
/* traffic-light buttons rendered as one dot + two box-shadow copies */
.macbook-frame::before {
    content: "";
    position: absolute;
    margin: 8px 0 0 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;                       /* red */
    box-shadow: 16px 0 0 #febc2e,             /* yellow */
                32px 0 0 #28c840;             /* green */
    z-index: 2;
}
/* drop Quarto's paragraph/figure wrapper spacing so the image fills the frame */
.macbook-frame :is(p, figure, div.quarto-figure) { margin: 0; }
.macbook-frame img {
    display: block;
    width: 100%;
    margin: var(--mf-bar-h) 0 0;              /* clear the title bar */
    border-top: 1px solid var(--pf-frame-img-border);
    border-radius: 0;
}
/* figcaption on macbook-frame's topbar */
.macbook-frame figcaption {
    position: absolute;
    top: -23.5px;
    left: auto;   /* align left*/
    right: 12px;
    height: var(--mf-bar-h);
    display: flex;
    text-align: right;
    padding-left: calc(54px + 1em);
    align-items: center;
    z-index: 2;
    font-style: normal;
    font-size: calc(var(--mf-bar-h) * 0.55);  /* scales with the title bar */
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Image Frame (img frame) ================================================ */
.img-frame {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 1.75rem auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 82, 98, 0.12);
    box-shadow: var(--pf-shadow);
}
/* drop Quarto's paragraph/figure wrapper spacing so the image fills the frame */
.img-frame :is(p, figure, div.quarto-figure) { margin: 0; }
.img-frame img {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0;
}
/* keeps the bottom caption visible below the image. */
.img-frame figure > figcaption.quarto-float-caption-bottom {
    margin-bottom: .2em;
    font-size: .8rem;
    font-style: normal;
}


/* 17. Responsive ======================================================= */

@media screen and (max-width: 991.98px) {
    /* navbar */
    a.nav-link {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }
    .navbar .quarto-navbar-tools
    .dropdown-menu[aria-labelledby="quarto-navigation-tool-dropdown-0"] {
        padding: 0.35em;
        border-radius: var(--pf-radius);
    }
    .navbar .dropdown-menu[aria-labelledby="quarto-navigation-tool-dropdown-0"]
    .dropdown-item {
        padding: 0.3em 0.75em;
        border-radius: var(--pf-radius-sm);
        font-size: 1rem;
        text-align: center;
    }
    /* In the collapsed navbar, nested links belong to the same vertical list
       as the first-level links rather than a desktop-style floating popover. */
    .navbar .navbar-nav > .nav-item > .dropdown-menu {
        display: flex;
        flex-direction: column;
        width: calc(100% - 0.75rem);
        max-height: 0;
        margin: 0 0 0 0.75rem;
        padding: 0;
        overflow: hidden;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-0.25rem);
        transform-origin: top;
        transition:
            max-height 0.22s cubic-bezier(0.2, 0, 0, 1),
            opacity 0.16s ease-out,
            transform 0.22s cubic-bezier(0.2, 0, 0, 1),
            visibility 0s linear 0.22s;
    }
    .navbar .navbar-nav > .nav-item > .dropdown-menu.show {
        max-height: 7.5rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }
    .navbar .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle::before {
        transform-origin: center;
        transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
    }
    .navbar .navbar-nav.me-auto > .nav-item.dropdown > .dropdown-menu[data-bs-popper] {
        left: auto !important;
        margin-top: 0;
    }
    .navbar .navbar-nav > .nav-item > .dropdown-menu .dropdown-item {
        width: 100%;
        padding: 0.5rem 1rem;
        border-radius: var(--pf-radius-sm);
        color: var(--pf-text-secondary);
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        text-align: left;
        transition: color 0.15s, background-color 0.15s;
    }
    .navbar .navbar-nav > .nav-item > .dropdown-menu .dropdown-item:hover,
    .navbar .navbar-nav > .nav-item > .dropdown-menu .dropdown-item:focus,
    .navbar .navbar-nav > .nav-item > .dropdown-menu .dropdown-item.active {
        color: var(--pf-primary);
        background-color: var(--pf-primary-light);
    }
    nav.quarto-secondary-nav { background-color: var(--pf-bg); }
    nav.quarto-secondary-nav button.btn.quarto-search-button { display: none; }

    #quarto-sidebar { max-width: 100vw !important; }
    #quarto-sidebar .sidebar-item-text,
    #quarto-sidebar .sidebar-section-item,
    #quarto-sidebar .sidebar-link {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Lift the header above the open sidebar so the language dropdown shows
       (see note in section 11). */
    #quarto-header.fixed-top { z-index: 1056; }

    /* sidebar top whitespace */
    #quarto-sidebar > div:first-child {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* sidebar section (level 1) */
    .sidebar-item-container .sidebar-section,
    .sidebar-menu-container .list-unstyled > .sidebar-item { margin: 1rem 0 0.5rem; }
    /* sidebar item (level 2 / submenu) */
    .sidebar-menu-container .sidebar-section .sidebar-section-item,
    .sidebar .sidebar-section > .sidebar-item,
    .quarto-sidebar .sidebar-section-item { margin: 0.8rem 0 0.2rem; }

    /* breadcrumbs + body top margin */
    nav .breadcrumb,
    nav .quarto-page-breadcrumbs { padding: 0.5rem 0; }
    #quarto-content > *       { margin-top: 1rem; }
    nav#quarto-sidebar        { margin-top: 0; }
    #quarto-content .subtitle { padding-top: 0; }

    /* TOC */
    #quarto-margin-sidebar:has(nav#TOC) {
        padding-top: 0.8rem;
    }
    #quarto-margin-sidebar:has(nav#TOC) li a {
        font-size: 0.9rem !important;
        padding: 0.3rem 0.8rem !important;
    }

    .quarto-listing-category {
        gap: 0.3rem;
        margin-bottom: 0.5rem;
    }
}

@media screen and (max-width: 768px) {
    body:not(.quarto-sidebar-visible) .quarto-title-block { padding: 0.5rem 0 0; }
    body:not(.quarto-sidebar-visible) .quarto-title h1.title,
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.35rem; }
    .btn-primary,
    .btn-outline-primary {
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
    }
    .featured-card { padding: 1.1rem 1.2rem 1.1rem 1.4rem; }
    .grid { gap: 0.75rem; }
    #title-block-header { margin: 0 0 1rem; }

    /* responsive-tag-bar.html hides overflow pills past the first row and
       reveals them via the toggle. */
    .quarto-grid-item .listing-title { font-size: 1.2rem; }
    .card-body .listing-category     { font-size: 0.65rem !important; }
    .quarto-listing-category .category.is-hidden { display: none !important; }

    /* JS in projects/index.qmd moves #quarto-margin-sidebar into main.content
       (after #title-block-header) at ≤768 px, then back out on wider screens. */
    #quarto-margin-sidebar:has(.quarto-listing-category) {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 1rem;
        position: static !important;
        float: none !important;
    }
}


/* Mobile Only & Mobile Hide */
.mobile-only {
    display: none;
}

@media screen and (max-width: 480px) {
    :root { font-size: 16px; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.35rem; }

    /* Mobile Only & Mobile Hide */
    .mobile-only {
        display: block;
    }
    .mobile-hide {
        display: none;
    }
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* no blink under reduced motion; leave a static (visible) cursor */
    body:not(.quarto-sidebar-visible) .quarto-title h1.title::after {
        animation: none;
        visibility: visible;
    }
}