/* assets/css/style.css */

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* (000) - SETUP AND FONTS */
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'SF Mono Nerd';
    src: url('/assets/js/fonts/SFMonoNerdFont-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

pre, code {
    font-family: 'SF Mono Nerd', monospace;
}

.highlight pre,
.highlight code {
    font-family: 'SF Mono Nerd', monospace;
}

:root {
    --text-color: #9b9b99;
    --lighter-text-color: #bcbcbc;

    --backup-text-color: #676767;
    --backup-text-color-v2: #8D8D8D;
    --backup-text-color-v3: #B3B3B3;
    --backup-text-color-v4: #E0E0E0;
    --backup-text-color-v5: #F5F5F5;

    --background-color: #ffffff;
    --main-accent: #B296FF;   
    --secondary-accent: #B296FF;
    --contrast-color: #000000;
    --lightest-text: #E0E0E0;
    --welcome-gif: url('/assets/images/resources/FINAL_V4.gif');
    --empty-ball: url('/assets/images/resources/emptyblackball.svg');
    --ball: url('/assets/images/resources/blackball.svg');
    --tag-accent-default: #444444;

    /* TAG PILL KNOBS (from the trial) */
    --tag-dur: 0.55s;
    --tag-dur-fast: 0.45s;
    --tag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --tag-overlap: -0.35rem;
    --tag-spread: 0.35rem;
    --tag-label-max: 12rem;

    /* OPACITY KNOBS (separate control) */
    --tag-opacity-dur: 2.5s;              /* your trial value */
    --tag-opacity-ease: var(--tag-ease);
    --tag-idle-opacity: 0.5;              /* your trial value */
    --tag-hover-opacity: 1;

    /* ARCHIVE LAYOUT KNOBS */
    --archive-gutter: 5rem;
    --archive-title-top: 4rem;
    --search-blur: 8px;
    --search-bar-width: 18rem;
    --search-dropdown-width: min(30rem, calc(100vw - (2 * var(--archive-gutter))));
    --search-page-max: 44rem;

    /* POST PAGE GRID — matches experiment */
    --post-toc-col: 20%;
    --post-gutter-a: 8%;
    --post-content-col: 40%;
    --post-gutter-b: 6%;
    --post-notes-col: 20%;
    --post-gutter-c: 6%;

    --post-content-max: 42rem;
    --post-notes-max: 20rem;
}

.crimson-pro {
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

blockquote {
    border-left: 0.0125rem solid var(--lightest-text);
    padding-left: 1.25rem; 
    color: var(--backup-text-color-v3);
    margin: 1.25rem 0; 
}

blockquote p{
    color: var(--backup-text-color-v3)
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* (001) - HOMEPAGE */
/* ----------------------------------------------------------------------------------------------------------------------------------------- */

/* ul */
.home-sidebar-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
}

/* li */
.home-sidebar-item {
    position: relative;
    display: block;
    width: fit-content;
    margin-bottom: 0.625rem;
    color: rgb(144, 144, 144);
    transition: background-color 0.3s, color 0.3s;
}

.home-sidebar-item a {
    color: inherit;
    text-decoration: none;
}

.home-sidebar-item a:hover{
    color: var(--contrast-color);
    text-decoration: none;
}

.home-sidebar-item::before {
    content: '';
    position: absolute;
    left: 5.2%; 
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 0.5rem;
    height: 0.5rem;
    background-image: var(--empty-ball);
    background-size: cover;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.home-sidebar-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.home-sidebar-item:hover {
    color: var(--contrast-color);
}

.home-sidebar-preview {
    position: absolute;
    top: 50%;
    left: calc(100% + 1.5rem);
    display: block;
    width: clamp(9rem, 14vw, 13rem);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.4rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
    z-index: 2;
}

.home-sidebar-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

@media (hover: hover) and (pointer: fine) and (min-width: 37.5625rem) {
    .home-sidebar-item:hover .home-sidebar-preview,
    .home-sidebar-item:focus-within .home-sidebar-preview {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .home-sidebar-item:hover .home-sidebar-preview img,
    .home-sidebar-item:focus-within .home-sidebar-preview img {
        opacity: 1;
        transform: scale(1);
    }
}

@media (hover: none), (pointer: coarse), (max-width: 37.5rem) {
    .home-sidebar-preview {
        display: none;
    }
}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* (002) - DESIGN BASICS */
/* ----------------------------------------------------------------------------------------------------------------------------------------- */

::-moz-selection { 
    color: var(--background-color);
    background: var(--contrast-color);
  }
  
::selection {
color: var(--background-color);
background: var(--contrast-color);
}

/* ------------------------------------------------------------------ */
/* HOME (Field Notes editorial block)                                 */
/* ------------------------------------------------------------------ */

.home-page {
background: var(--background-color);
min-height: 100vh;
}

.home-shell {
/* puts the block lower on the page, like your reference image */
max-width: 42rem;
margin: 0 auto;
padding: 2vh 2rem 0vh;
}

.home-hero {
text-align: center;
}

/* 1) Title: its own style */
.home-title {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 4.5rem;
line-height: 1.05;
color: #b6b6b6;
margin: 0 0 1rem 0;
}

/* Title stack: positioning context for scribbles */
.titleStack{
  position: relative;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 5rem;
  padding: 8px 0 0;
  display: grid;
  place-items: center;
}

/* handwriting overlays */
.scribble-name{
  position: absolute;
  top: 1px;              /* tune */
  transform: translateX(90px) rotate(1deg); /* tune */
  height: 28px;           /* tune */
  /* opacity: 0.9; */
  pointer-events: none;
}

.scribble-sub{
  position: absolute;
  top: 78px;              /* tune */
  left: 50%;
  transform: translateX(-60px) rotate(0.5deg);
  height: 14px;
  opacity: 0.75;
  pointer-events: none;
}

/* 2) Subtitle: its own style */
.home-subtitle {
margin: 0 0 3rem 0;
line-height: 1.15;
}

.home-subtitle-line {
display: block;
font-family: "Crimson Pro", serif;
font-weight: 300;
font-size: 1.6rem;
color: var(--backup-text-color-v2);
}

.home-subtitle-by {
display: block;
margin-top: 0.35rem;
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--backup-text-color-v3);
}

/* 3) Link list: its own style */
.home-nav {
text-align: left;
line-height: 1.6;
}

.home-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
flex-direction: column;
gap: 0.2rem;
}

.home-nav-list li {
font-family: Inter, sans-serif;
margin: 0;
color: var(--backup-text-color-v2);
}

.home-nav-list a:any-link {
    color: inherit;
}

/* HOME mark image (above title) */
.home-mark{
margin: 0 0 2.5rem 0;   /* space under image */
display: flex;
justify-content: center;
margin-top: 6rem;
}

.home-mark-img{
/* knobs */
--home-mark-width: 18rem;     /* change this */
--home-mark-max: 70vw;        /* prevents overflow on small screens */

width: min(var(--home-mark-width), var(--home-mark-max));
height: auto;
display: block;

/* optional: subtle “print” feel */
/* filter: contrast(1.02); */
}

.home-nav-link {
font-weight: 400;
font-size: 1.4rem;
color: inherit;
text-decoration: none;
transition: color 180ms ease, transform 180ms ease;
}

.home-nav-link--icon {
display: inline-flex;
align-items: center;
width: fit-content;
}

.home-nav-link--icon:focus-visible {
outline: 1px solid currentColor;
outline-offset: 0.18rem;
}

.home-nav-label {
line-height: 1;
}

.home-nav-icon {
width: 0;
height: 1.05em;
flex: 0 0 auto;
margin-right: 0;
overflow: hidden;
background-color: currentColor;
opacity: 0;
-webkit-mask-image: var(--icon-url);
mask-image: var(--icon-url);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transform: scale(0.85);
transition: width 180ms ease, margin-right 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.home-nav-link:hover {
color: var(--contrast-color);
transform: translateY(-1px);
text-decoration: none;
}

.home-nav-link:hover .home-nav-icon,
.home-nav-link:focus-visible .home-nav-icon {
width: 1.05em;
margin-right: 0.7rem;
opacity: 1;
transform: scale(1);
}

.home-nav-list a.home-nav-link:hover {
  color: var(--contrast-color);
  text-decoration: none;
}

.post-header {
    margin-bottom: 5vh;
    margin-top: 5vh;
    max-width: 42rem;
}

.post-meta-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    --post-meta-nav-size: 0.9rem;
    --post-meta-nav-color: var(--text-color);
    --post-meta-nav-weight: 500;
}

.post-metadata-container {
    display: flex;
    align-items: flex-end;
}

.post-meta-container-left-side {
    flex: 0 1 auto;
    padding-right: 20rem;
    margin-left: 0;
    text-align: left;
}

.post-meta-container-right-side {
    flex: 0 1 auto;
    padding-left: 1.25rem;
    margin-left: auto;
    text-align: left;
    /* background-color: #f0f0f0; */
}

.mobile-post-menu-shell {
    display: none;
}

.mobile-post-menu-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
}

.mobile-post-menu-dot {
    display: block;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--backup-text-color-v3);
}

.post-metadata {
    flex: 0 1 auto;
    align-self: flex-end;
    text-align: left;
    /* background-color: #f0f0f0; */
}

.post-meta-mobile {
    display: none;
}


.vertical-line {
    border-left: 0.0625rem solid var(--lightest-text); /* Adjust thickness and color as needed */
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.post-meta-date {
    margin-bottom: 2vh;
}

.title-post-meta-p {
    text-align: justify;
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--backup-text-color-v4);
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

/* Yes */

.fourofour-text p{
    text-align: center;
    color: var(--contrast-color);
}

.page-content .fourofour-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0vh;
}

body {
    /* background-color: var(--background-color); */
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* Smooth scroll for TOC linmain.contentks */
html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

main.content {
    position: relative;
    z-index: 1;
    background-color: var(--background-color);
    min-height: 100vh;        /* important for the reveal */
}

.post-wrapper,
.post-outer {
    padding-bottom: 20vh; /* Now padding is based on where content ACTUALLY ends */
}

/* Post nav: prev | back to top | next */
.post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
}

.post-nav-prev,
.post-nav-center,
.post-nav-next {
    min-width: 0;
}

.post-nav-prev {
    text-align: left;
    flex: 1;
}

.post-nav-center {
    text-align: center;
    flex-shrink: 0;
}

.post-nav-next {
    text-align: right;
    flex: 1;
}

.layout-post .post-nav .post-nav-link {
    color: var(--backup-text-color-v4);
    text-decoration: none;
    transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .layout-post .post-nav .post-nav-link:hover {
        color: var(--contrast-color);
        text-decoration: none;
    }
}

.content {
    text-align: left;
}


/* Grouping p, li, and ul so they share the same base typography */
p,
li,
ul {
    font-weight: 400;
    color: var(--backup-text-color);
    font-size: 1.35rem;
    font-family: 'Crimson Pro', serif;
    line-height: 1.4;
}

/* Add a little margin to the bottom of lists so they space out like paragraphs do */
ul, ol {
    margin-bottom: 1.25rem;
}

a:-webkit-any-link {
    color: var(--contrast-color);
    cursor: pointer;
    transition: color 0.5s ease;
} 

a:-webkit-any-link:hover {
    color: var(--main-accent);
    cursor: pointer;
    text-decoration: underline;
}

a:any-link{
    color: var(--contrast-color);
    cursor: pointer;
    transition: color 0.5s ease;
}

a:any-link:hover{
    color: var(--main-accent);
    cursor: pointer;
    text-decoration: underline;
}

.content {
    min-height: 100vh;
    text-align: left;
}

/* ------------------------------------------------------------------ */
/* FOOTER — top row layout fixed properly                             */
/* ------------------------------------------------------------------ */

.site-footer {
    position: sticky;
    bottom: 0;
    z-index: 0;

    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--background-color);

    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 2rem 2rem 1.5rem 2rem;
}

/* top row wrapper */
.site-footer > .footer-top {
    position: relative;
    z-index: 2;
}

.footer-top {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content;
    column-gap: 4.5rem;
    align-items: start;

    width: 100%;
    /* max-width: 96rem; */
    margin: 0 auto;
}

/* left title block */
.footer-mark {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    line-height: 0.95;
    color: var(--backup-text-color-v4);
    white-space: nowrap;
}

/* each section: label aligned with first item of list */
.footer-group {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 1rem;
    align-items: start;
}

.footer-group-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    color: #d7d7d7;
    white-space: nowrap;
    padding-top: 0;
}

.footer-group-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.footer-group-links a {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--backup-text-color-v2);
    text-decoration: none;
    white-space: nowrap;
}

.footer-group-links a:hover {
    color: var(--contrast-color);
    text-decoration: none;
}

/* HUD column - no label, just time/city/weather like other columns */
.footer-group--hud {
    grid-template-columns: 0 max-content;
}

.footer-group-label--empty {
    visibility: hidden;
    overflow: hidden;
}

.footer-hud-line {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.weather-pending {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ascii art stage */
.ascii-footer-wrapper {
    grid-row: 2;

    align-self: end;
    justify-self: center;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    margin: 0;
    overflow: hidden;
    padding-top: 3rem;
}

.ascii-footer-wrapper pre,
.ascii-footer {
    margin: 0;
    white-space: pre;
    text-align: left;
    display: inline-block;
    font-family: monospace;
    font-size: 0.35rem;
    line-height: 0.82;
    color: #c6c6c6;
}

.ascii-footer span {
    transition: color 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-reduced-motion: reduce) {
    .ascii-footer span {
        transition: none;
    }
}

.ascii-footer.hl-0 .t0 { color: #8fbed8; }
.ascii-footer.hl-1 .t1 { color: #d0e8f2; }
.ascii-footer.hl-2 .t2 { color: #a2d2e8; }
.ascii-footer.hl-3 .t3 { color: #6fb8dc; }
.ascii-footer.hl-4 .t4 { color: #5ba4cc; }
.ascii-footer.hl-5 .t5 { color: #3d8ab8; }
.ascii-footer.hl-6 .t6 { color: #2e6ea4; }
.ascii-footer.hl-7 .t7 { color: #1e4d78; }
.ascii-footer.hl-8 .t8 { color: #163d5c; }

/* signoff under map */
.footer-signoff {
    grid-row: 3;
    align-self: end;
    justify-self: center;
    text-align: center;
    padding-top: 1rem;
}

.footer-signoff-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--backup-text-color-v4);
    margin-bottom: 0.1rem;
}

.footer-signoff-meta a,
.footer-signoff-meta a:any-link {
    color: inherit;
    text-decoration: none;
}

.footer-signoff-meta a:hover,
.footer-signoff-meta a:any-link:hover {
    color: inherit;
    text-decoration: underline;
}

.footer-signoff-coords {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: var(--backup-text-color-v3);
    margin-bottom: 0.3rem;
}

.footer-signoff-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--backup-text-color-v4);
}

@keyframes footerMobileReveal {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    /* Reduce footer blink during fast scroll: solid background + compositing layers */
    body {
        background-color: var(--background-color);
    }
    .layout-post .post-wrapper,
    .layout-post .post-outer {
        padding-bottom: 8vh;
    }
    main.content {
        transform: translateZ(0);
        backface-visibility: hidden;
        margin-top: 0;
    }
    .layout-post main.content {
        transform: none;
    }
    .site-footer {
        position: static;
        bottom: auto;
        z-index: auto;
        grid-template-rows: auto 1fr auto;
        padding: 1.5rem 1.25rem 1.25rem 1.25rem;
        min-height: 100vh;
        backface-visibility: hidden;
    }
    @supports (animation-timeline: view()) {
        .site-footer {
            opacity: 0;
            will-change: opacity, transform;
            animation-name: footerMobileReveal;
            animation-duration: 0.9s;
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-fill-mode: both;
            animation-timeline: view();
            animation-range: entry 8% cover 32%;
        }
    }

    .footer-top {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
        max-width: none;
    }

    .footer-mark {
        font-size: 2.3rem;
    }

    .footer-group {
        grid-template-columns: 5.5rem 1fr;
        column-gap: 1rem;
    }

    .ascii-footer-wrapper {
        width: 100%;
        overflow-x: auto;
        justify-content: center;
    }

    .ascii-footer-wrapper pre,
    .ascii-footer {
        font-size: 0.1rem;
        line-height: 0.8;
    }
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* (003) - HUB PAGES */
/* ----------------------------------------------------------------------------------------------------------------------------------------- */

.stickysidebar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8vw;
}

/* ul */
.stickysidebar-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* li */
.stickysidebar-list-item {
    position: relative;
    margin-bottom: 0.625rem;
    color: rgb(144, 144, 144);
    transition: background-color 0.3s, color 0.3s;
}

.stickysidebar-list-item a{
    color: inherit;
    text-decoration: none;
}

.stickysidebar-list-item::before {
    content: '';
    position: absolute;
    left: 6.4%; 
    top: 50%;
    transform: translateY(-50%) scale(0);
    /* width: 1rem;
    height: 1rem; */
    width: 0.5rem;
    height: 0.5rem;
    background-image: var(--empty-ball);
    background-size: cover;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.stickysidebar-list-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.stickysidebar-list-item:hover {
     color: var(--contrast-color)
}

.stickysidebar-list-item a:hover {
    text-decoration: none;
    /* text-decoration: underline; */
     color: var(--contrast-color);
}

.stickysidebar-list-item a.active {
    font-weight: bold;
    color: var(--contrast-color);
}

.stickysidebar ul li a.active::before {
    content: '';
    position: absolute;
    left: 6.4%; 
    top: 50%;
    transform: translateY(-50%);
    /* width: 1rem;
    height: 1rem; */
    width: 0.5rem;
    height: 0.5rem;
    background: var(--ball) center center;
    background-size: cover;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.stickysidebar ul li a.active:hover::before {
     opacity: 0;
}


.page-content {
    margin-right: 8vw;
    margin-left: 30vw;
    padding-top: 8vh;
    padding-bottom: 1.25rem;
}

.page-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8vh;
    margin-top: 8vh;
}

/* When media/table has a caption, drop its bottom margin so caption sits snug */
.page-content img:has(+ em),
.page-content img:has(+ p > em:only-child),
.page-content table:has(+ em),
.page-content table:has(+ p > em:only-child) {
    margin-bottom: 0;
}

/* ── table scroll wrapper (injected by tables.js) ──────────────────── */
.table-wrapper {
    margin: 2rem 0;
    overflow-x: visible;
}

.table-wrapper:has(+ em),
.table-wrapper:has(+ p > em:only-child) {
    margin-bottom: 0;
}

.table-wrapper--scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper--scrollable::-webkit-scrollbar {
    height: 6px;
}
.table-wrapper--scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.table-wrapper--scrollable::-webkit-scrollbar-thumb {
    background: var(--lightest-text);
    border-radius: 3px;
}
.table-wrapper--scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--backup-text-color-v3);
}

.table-wrapper table {
    margin: 0;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-weight: 400;
    font-size: 1.1rem;
    font-family: 'Crimson Pro', serif;
    line-height: 1.4;
    color: var(--backup-text-color);
}

.page-content table.table--scrollable {
    width: max-content;
    min-width: 100%;
}

.page-content th,
.page-content td {
    padding: 0.55rem 0.75rem;
    border-bottom: 0.0625rem solid var(--lightest-text);
    text-align: left;
    vertical-align: top;
    font: inherit;
    color: inherit;
}

.page-content thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--background-color);
    font-weight: 700;
    color: var(--backup-text-color);
}

.page-content thead th.table-header-mathjax mjx-container,
.page-content thead th.table-header-mathjax mjx-container *,
.page-content thead th .table-header-mathjax mjx-container,
.page-content thead th .table-header-mathjax mjx-container * {
    font-weight: 700 !important;
}

.page-content tbody tr {
    transition: background-color 0.2s ease;
}

.page-content tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Captions/footers: italic text after media or tables in Markdown */
img + em,
table + em,
.table-wrapper + em {
    display: block;
    font-style: normal;
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    color: var(--backup-text-color-v3);
    margin-bottom: 2rem;
    margin-top: 0.7rem;
}

img + p:has(> em:only-child),
table + p:has(> em:only-child),
.table-wrapper + p:has(> em:only-child) {
    margin-top: 0.7rem;
    margin-bottom: 2rem;
}

img + p > em:only-child,
table + p > em:only-child,
.table-wrapper + p > em:only-child {
    display: block;
    font-style: normal;
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    color: var(--backup-text-color-v3);
}

/* Optional figure numbering: add .figures-counted to post body, set figure_count: true in front matter */
.figures-counted {
    counter-reset: figure-counter table-counter;
}

.figures-counted img + em::before,
.figures-counted img + p > em:only-child::before {
    counter-increment: figure-counter;
    content: "Figure " counter(figure-counter) " — ";
    font-weight: 600;
}

.figures-counted table + em::before,
.figures-counted table + p > em:only-child::before,
.figures-counted .table-wrapper + em::before,
.figures-counted .table-wrapper + p > em:only-child::before {
    counter-increment: table-counter;
    content: "Table " counter(table-counter) " — ";
    font-weight: 600;
}


.page-title {
    font-size: 3rem;
    margin: 0;
    color: #180023;
    margin-top: 3vh;
    margin-bottom: 3vh;
}

.subpage-intro:hover .dark{
    transform: scaleX(1);
}

.subpage-intro:hover .subhome-description-p{
    color: var(--contrast-color);
}

.subhome-description {
    text-align: justify;
    margin-bottom: 15vh;
}

.subhome-description-p{
    text-align: justify;
    color: var(--backup-text-color-v2);
    margin-bottom: 15vh;
    transition: color 0.3s ease;
}

.subtitle {
    font-weight: 500;
    font-size: 1rem;
    color: var(--backup-text-color);
    text-align: left;
    transition: color 0.3s ease;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8vh;
}

.content-header img{
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 0;
    margin-bottom: 1.25rem;
    margin-right: 0;
    margin-left: 0;
    width: 5rem;
}

.page-icon {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 1.25rem !important;
    width: 4.375rem !important;
}

.div-line {
    border-bottom: 0.0875rem dotted var(--lightest-text);
    margin-bottom: 8vh;
    height: 0.0063rem;
}

.line {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: left;  
}

.sub {
    border-bottom: 0.0063rem solid var(--lightest-text);
    height: 0.0063rem;
}

.contrast {
    border-bottom: 0.0063rem solid var(--lightest-text);
    height: 0.0063rem;
    margin-top: 0.75rem;
}

.inv {
    border-bottom: 0.0312rem solid var(--background-color);
    height: 0.0063rem;
}

.dark {
    border-bottom: 0.0187rem solid var(--contrast-color);
    transform: scaleX(0); 
    transition: transform 0.6s ease-in-out; 
}

.topics .subtitle{
    transition: color 0.3s ease;
}

.topics:hover .dark{
    transform: scaleX(1); 
}

.topics:hover .subtitle{
    color: var(--contrast-color);
}

.topics:hover .muted{
    color: var(--backup-text-color);
}

.topics:hover .section-tags a{
    color: var(--backup-text-color);
}

.section-tags a:hover{
    color: var(--contrast-color);
}

.post-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.post-list-item {
    padding-left: 0rem;
    margin-bottom: 0.625rem;
    background-color: white;
    color: rgb(144, 144, 144);
}

.latest-post{
    margin-bottom: 15vh;
}

.latest-post a{
    text-decoration: none;
    color: var(--backup-text-color-v2);
    transition: color 0.3s ease;
}

.latest:hover .dark{
    transform: scaleX(1);
}

.latest:hover .subtitle{
    color: var(--contrast-color);
}

.latest:hover .latest-post a{
    color: var(--contrast-color);
}

.latest:hover p {
    color: var(--backup-text-color);
}

.latest:hover .latest-post-time {
    color: var(--main-accent);
}

.latest-post-title {
    text-decoration: none;
    /* font-weight: bold; */
    color: var(--backup-text-color-v2);
    transition: color 0.3s ease;
}

.latest-post-p {
    text-align: justify;
    margin-top: 1vh;
    margin-bottom: 3vh;
    font-weight: 400;
    color: var(--backup-text-color-v3);
    font-size: 0.875rem;
    /* text-transform: uppercase; */
    transition: color 0.3s ease;
}

.latest-post-time{
    /* font-weight: 400; */
    font-size: 0.75rem;
    text-transform: uppercase;
    display: block;
    color: var(--backup-text-color-v3);
    transition: color 0.3s ease;
    margin-bottom: 2vh;
}

.latest-post-read-more {
    text-decoration: none;
    color: var(--contrast-color);
    font-weight: bold;
    transition: color 0.3s ease;
}

.latest-post-read-more a{
    color: var(--backup-text-color-v2);
    font-weight: bold;
    transition: color 0.3s ease;
    font-size: 0.875rem;
}

.latest-post-read-more:hover a{
    /* background-color: var(--contrast-color); */
    color: wheat;
}

.latest-post-read-more:hover{
    /* background-color: var(--contrast-color); */
    color: wheat;
}

.section-tags{
    margin-bottom: 15vh;
}

.section-tags a{
    color: var(--backup-text-color-v2);
    transition: color 0.3s ease;
}

.section-tags a:hover{
    color: var(--contrast-color);
}

.topics .internal-link:hover {
    color: var(--contrast-color);
    /* Additional styles */
}

.topics .section-tags .internal-link:hover {
    color: var(--contrast-color);
    /* Additional styles */
}

.internal-link:hover {
    color: var(--main-accent);
}

.muted{
    transition: color 0.3s ease;
    color: var(--backup-text-color-v2);
}

/* .posts li {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
} */

.posts li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.post-content {
    flex-grow: 1;
}

.posts-ul {
    padding: 0;
    margin-bottom: 5vh;
    margin-top: 5vh;
}

.all-post-item{
    color: var(--backup-text-color-v2);
    transition: color 0.3s ease;
}

.all-post-item a{
    color: var(--backup-text-color-v2);
    margin-left: auto;
}

.all-post-item-title {
    text-decoration: none;
    list-style-type: none;
    transition: color 0.3s ease;
}

.all-post-time{
    font-size: 0.75rem;
    color: var(--backup-text-color-v4);
    padding-right: 1rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.post-meta {
    text-align: left; /* Aligns the content within post-meta to the left */
}

.all-post-item-title:hover {
    color: var(--contrast-color);
    /* color: var(--main-accent); */
    text-decoration: underline;
}

.all-post-item:hover .all-post-time{
    /* color: var(--main-accent); */
    color: var(--secondary-accent);
}

.all-post-item:hover .all-post-description{
    color: var(--backup-text-color);
    /* color: red;
    color: var(--contrast-color); */
}

.all-post-item:hover .all-post-item-title{
    color: var(--contrast-color);
    /* color: var(--main-accent); */
}

.all:hover .all-post-item a{
    color: var(--backup-text-color);
}

.all:hover .all-post-item{
    color: var(--backup-text-color);

}

.all:hover .dark{
    transform: scaleX(1);
}

.all:hover .subtitle{
    color: var(--contrast-color);
}

/* .posts-ul .all-post-item a:hover {
    color: var(--contrast-color);
} */

.posts-ul .all-post-item:hover a {
    color: var(--contrast-color);
}

.all-post-description {
    font-size: 0.75rem;
    color: var(--backup-text-color-v3);
    display: block;
    margin-top: 0.5vh;
    margin-bottom: 6vh;
    transition: color 0.3s ease;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* (004) - POST PAGE & MARKDOWN BASICS (THINK OBSIDIAN SETTINGS) */
/* ----------------------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ */
/* TAGS: BALL ➜ PILL ON HOVER (KNOBBED + OPACITY)                     */
/* ------------------------------------------------------------------ */

/* per-tag accent colors */
.tag-pill--math { --tag-accent: #4A90E2; }
.tag-pill--ml { --tag-accent: #B296FF; }
.tag-pill--personal { --tag-accent: #FFB347; }
.tag-pill--reading { --tag-accent: #5BCF9B; }

/* container */
.tags-holder {
  display: inline-flex;
  align-items: center;
  gap: 0rem;

  /* NEW: opacity breathing (matches trial) */
  opacity: var(--tag-idle-opacity);
  transition: opacity var(--tag-opacity-dur) var(--tag-opacity-ease);
}

/* fade up when parent "unrolls" OR cluster hovered */
.post-meta-tags:hover .tags-holder,
.archive-item:hover .tags-holder,
.tags-holder:hover {
  opacity: var(--tag-hover-opacity);
}

/* base: stacked balls like avatars */
.tags-holder .tag-pill {
  --tag-accent: var(--tag-accent-default);
  --tag-accent-light: color-mix(in srgb, var(--tag-accent) 25%, #ffffff 75%);
  --tag-accent-dark:  color-mix(in srgb, var(--tag-accent) 80%, #000000 20%);

  position: relative;
  display: inline-flex;
  align-items: center;

  margin-left: var(--tag-overlap);
  padding: 0;

  border-radius: 999px;
  overflow: hidden;
  background-color: transparent;
  text-decoration: none;

  transition:
    background-color var(--tag-dur-fast) var(--tag-ease),
    transform        var(--tag-dur-fast) var(--tag-ease),
    filter           var(--tag-dur-fast) var(--tag-ease),
    padding          var(--tag-dur-fast) var(--tag-ease),
    margin-left      var(--tag-dur-fast) var(--tag-ease);
}

.tags-holder .tag-pill:first-child {
  margin-left: 0;
}

/* the ball */
.tag-pill-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  border: 0.125rem solid var(--background-color);
  background-color: var(--tag-accent-light);
  flex-shrink: 0;

  transition:
    margin-right     var(--tag-dur-fast) var(--tag-ease),
    background-color var(--tag-dur-fast) var(--tag-ease),
    border-color     var(--tag-dur-fast) var(--tag-ease);
}

/* the label (hidden at rest) */
.tag-pill-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;

  margin-left: 0;
  padding-right: 0;

  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  text-transform: lowercase;
  color: var(--backup-text-color-v2);
  line-height: 1.2;

  /* delay only on the way OUT */
  transition:
    opacity   var(--tag-dur-fast) var(--tag-ease) calc(var(--tag-dur-fast) * 0.6),
    max-width var(--tag-dur-fast) var(--tag-ease) calc(var(--tag-dur-fast) * 0.6),
    margin-left var(--tag-dur-fast) var(--tag-ease) calc(var(--tag-dur-fast) * 0.6);
}

/* -------------------------------------------------------------- */
/* Unroll triggers: hover the group (post-meta-tags) or holder     */
/* -------------------------------------------------------------- */

.post-meta-tags:hover .tag-pill,
.tags-holder:hover .tag-pill {
  margin-left: var(--tag-spread);
  padding: 0 0.5rem 0 0.15rem;
  background-color: var(--background-color);
}

.post-meta-tags:hover .tag-pill:first-child,
.tags-holder:hover .tag-pill:first-child {
  margin-left: 0;
}

.post-meta-tags:hover .tag-pill-dot,
.tags-holder:hover .tag-pill-dot {
  margin-right: 0.1rem;
}

.post-meta-tags:hover .tag-pill-label,
.tags-holder:hover .tag-pill-label {
  max-width: var(--tag-label-max);
  opacity: 1;

  /* no delay on the way IN */
  transition:
    opacity   var(--tag-dur-fast) var(--tag-ease) 0s,
    max-width var(--tag-dur-fast) var(--tag-ease) 0s,
    margin-left var(--tag-dur-fast) var(--tag-ease) 0s;
}

/* -------------------------------------------------------------- */
/* Hover a specific pill -> accent it                              */
/* -------------------------------------------------------------- */

.post-meta-tags .tag-pill:hover,
.tags-holder .tag-pill:hover {
  filter: brightness(1.05);
}

.post-meta-tags .tag-pill:hover .tag-pill-dot,
.tags-holder .tag-pill:hover .tag-pill-dot {
  background-color: var(--tag-accent-dark);
}

.post-meta-tags .tag-pill:hover .tag-pill-label,
.tags-holder .tag-pill:hover .tag-pill-label {
  color: var(--contrast-color);
}

/* Don't inherit global link hover styles inside tag pills */
.tags-holder .tag-pill,
.tags-holder .tag-pill:hover {
  color: inherit;
  text-decoration: none;
}


.post-top .post-metadata {
    max-width: 42rem;
    margin: 0 auto 2rem auto;
}

.post-metadata .meta {
    display: flex;
    flex-direction: column;
}

/* Row: [ dates ] [ section blurb ] side by side */
.post-meta-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal tracks = your black columns */
    column-gap: 2rem;                       /* the “salmon” distance between blocks */
    align-items: flex-start;
}

.post-meta-date {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* push date + "last edited" to bottom */
}

.post-meta-last-modified {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.post-meta-section {
    text-align: left;
    display: flex;
    justify-content: flex-end;   /* move "Notes" toward the right if you like */
    align-items: flex-end;       /* bottom-align the text itself */
}

.post-meta-section-text {
    margin: 0;                   /* remove extra top margin so baseline matches */
    font-family: 'Crimson Pro', serif;
    font-size: 1.2rem;
    color: black;
    font-weight: 300;
    font-style: italic;
    text-transform: lowercase;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.post-meta-section-chip {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 0.2rem;
}

.post-meta-section-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.post-meta-section-link:hover,
.post-meta-section-link:focus-visible {
    text-decoration: none;
}

.page-content .post-meta-section-chip .post-meta-section-icon {
    display: block;
    width: 0.72rem !important;
    min-width: 0.72rem;
    max-width: none !important;
    height: auto !important;
    object-fit: contain;
    flex: 0 0 auto;
    margin: 0 !important;
    opacity: 0.8;
}

.post-meta-section-icon--dark {
    display: none;
}

body.theme-dark .post-meta-section-icon--light {
    display: none;
}

body.theme-dark .post-meta-section-icon--dark {
    display: block;
}

.breadcrumbs {
    font-family: 'Inter', sans-serif;
    font-weight: var(--post-meta-nav-weight);
    font-size: var(--post-meta-nav-size);
    color: var(--post-meta-nav-color);
    text-align: left;
    margin: 0;
}

.title-post-meta-p {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'Crimson Pro';
    font-weight: 300;
    color: #6449ff;
    font-size: 2.2rem;
    transition: color 0.3s ease;
    text-transform: lowercase;
    font-style: italic;
}

.post-meta-container-right-side .internal-link {
    margin: 0;
    margin-left: 1rem;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--backup-text-color-v3);
}

.post-meta-container-right-side .internal-link:hover,
.post-meta-container-right-side .internal-link:focus-visible {
    color: var(--contrast-color);
    text-decoration: none;
}

.internal-link{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--backup-text-color-v3);
    text-align: left;
    transition: color 0.3s ease;
}

.post-meta-container-left-side,
.post-meta-container-right-side {
  display: flex;
  align-items: flex-start;
}

.post-meta-container .breadcrumbs a,
.post-meta-container .archive-topnav > a{
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    transition: color 0.3s ease;
}

.post-meta-container .breadcrumbs a:hover,
.post-meta-container .breadcrumbs a:focus-visible,
.post-meta-container .archive-topnav > a:hover,
.post-meta-container .archive-topnav > a:focus-visible {
    color: var(--contrast-color);
    text-decoration: none;
}

.post-meta-container .archive-topnav > a {
    color: red !important;
    transition: color 12s linear !important;
}

.post-meta-container .archive-topnav > a:hover,
.post-meta-container .archive-topnav > a:focus-visible {
    color: #000000 !important;
}

/* FOOTNOTES BLOCK */
.footnotes {
  border-top: 0.0125rem solid var(--lightest-text);
  margin-top: 5vh;
  padding-top: 2rem;
}

.footnotes ol {
  margin: 0;
  padding-left: 1.25rem;
}

.footnotes li {
  color: var(--backup-text-color-v2);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

.footnotes ol li p {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--backup-text-color-v2);
}

.footnotes a {
  color: var(--backup-text-color-v2);
}

.footnotes a:hover {
  color: var(--main-accent);
}

.reversefootnote {
  font-size: 0.75rem;
  color: var(--backup-text-color-v3);
  text-decoration: none;
}

.reversefootnote:hover {
  color: var(--main-accent);
  text-decoration: underline;
}

.footnote {
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--main-accent);
  transition: text-decoration 0.3s, background-color 0.3s, color 0.3s;
  text-decoration: none;
  padding-left: 0.125rem;
}

.footnote:hover {
  color: var(--secondary-accent);
  text-decoration: underline;
}

.footnote.is-inline-footnote-open {
  color: var(--contrast-color);
  text-decoration: none;
}

@media (min-width: 1025px) {
  .layout-post #main.post sup[role="doc-noteref"] {
    position: relative;
    top: -0.45em;
    vertical-align: baseline;
    line-height: 0;
  }

  .layout-post #main.post sup[role="doc-noteref"] .footnote {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    padding-left: 0;
    margin-left: 0.08rem;
  }
}

.inline-footnote {
  display: inline-block;
  width: calc(100% - 1.5rem);
  margin: 1rem 0 1rem 0rem;
  padding: 0.1rem 0 0 0.8rem;
  vertical-align: top;
}

.inline-footnote-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: start;
}

.inline-footnote-number {
  font-family: 'Crimson Pro', serif;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--backup-text-color-v3);
}

.inline-footnote-body {
  min-width: 0;
}

.inline-footnote-paragraph {
  display: block;
  font-family: 'Crimson Pro', serif;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--backup-text-color-v2);
}

.inline-footnote-paragraph + .inline-footnote-paragraph {
  margin-top: 0.4rem;
}

.inline-footnote a {
  color: var(--backup-text-color-v2);
}

.inline-footnote a:hover {
  color: var(--main-accent);
}

.inline-footnote code {
  font-size: 0.72rem;
  background-color: var(--backup-text-color-v5);
}

/* .meta{
    margin-bottom: 0vh;
    display: block;
    align-items: right;
} */

/* .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
} */

.date-post{
    font-size: 0.875rem;
    margin: 0;
    color: var(--backup-text-color-v3);
}

.date-post-mono {
    font-family: 'SF Mono Nerd', monospace;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
}

.meta-label {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--backup-text-color-v3);
}
  
.post-meta-date,
.post-meta-last-modified,
.post-meta-section,
.post-meta-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* .tags-holder{
    font-size: 0.875rem;
    color: var(--backup-text-color-v3);
}

.tags-holder a{
    font-size: 0.875rem;
    color: var(--backup-text-color-v3);
} */

h1 {
    font-size: 3.125rem;
    margin: 0;
    color: var(--contrast-color);
}

h2 {
    font-size: 1.875rem;
    font-weight: 400;
    font-family: Inter, sans-serif;
    margin-top: 12vh;
    color: var(--contrast-color);
}

h3 {
    font-size: 1.5625rem;
    font-weight: 400;
    margin-top: 8vh;
    color: var(--contrast-color);
}

h4 {
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 8vh;
    color: var(--contrast-color);
}

h5 {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 8vh;
    color: var(--contrast-color);
}

h6 {
    font-size: 0.875rem;
    font-weight: 400;
    margin-top: 8vh;
    color: var(--contrast-color);
}

/* ------------------------------------------------------------------ */
/* CODE BLOCKS                                                         */
/* ------------------------------------------------------------------ */

/* inline code only */
:not(pre) > code {
  font-family: 'SF Mono Nerd', monospace;
  font-size: 0.8em;
  line-height: 1;
  color: #222222;
  background: #f3f3ef;
  border: 1px solid #e7e7df;
  border-radius: 0.35rem;
  padding: 0.12rem 0.32rem;
  white-space: nowrap;
}

/* outer wrapper from Jekyll/Rouge */
div[class^="language-"].highlighter-rouge,
.highlighter-rouge {
  position: relative;
  margin: 2rem 0;
}

/* actual block shell */
.highlighter-rouge .highlight {
  position: relative;
  background: #f7f7f2;
  border-radius: 0.9rem;
  overflow: hidden;
}

/* top bar */
.highlighter-rouge .highlight::before {
  content: attr(data-lang);
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8d8d8d;
  padding: 0.65rem 0.9rem;
}

/* scrolling code area */
.highlighter-rouge pre.highlight {
  margin: 0;
  padding: 0.9rem 1rem 1rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  line-height: 0;
}

/* code text */
.highlighter-rouge code {
  font-family: 'SF Mono Nerd', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #222222;
  background: transparent;
  border: 0;
  padding: 0;
  white-space: pre;
  display: block;
}

/* copy button */
.code-copy-button {
  position: absolute;
  top: 0.48rem;
  right: 0.55rem;
  z-index: 3;

  appearance: none;
  border: 1px solid #ddddcf;
  background: rgba(255, 255, 255, 0.88);
  color: #6b6b6b;
  border-radius: 0.45rem;
  padding: 0.32rem 0.52rem;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.code-copy-button:hover {
  background: #ffffff;
  color: #111111;
  border-color: #cfcfbe;
}

.code-copy-button:focus-visible {
  outline: 2px solid #b296ff;
  outline-offset: 2px;
}

/* Rouge token colors */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs {
  color: #8b8b84;
  font-style: italic;
}

.highlight .err {
  color: #b00020;
  background: transparent;
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .ow {
  color: #7b61ff;
}

.highlight .o {
  color: #5f5f5f;
}

.highlight .p {
  color: #6d6d66;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx {
  color: #2f8f5b;
}

.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .il,
.highlight .mo {
  color: #c45508;
}

.highlight .na {
  color: #7c3aed;
}

.highlight .nb,
.highlight .bp {
  color: #2563eb;
}

.highlight .nc,
.highlight .nf,
.highlight .fm {
  color: #1d4ed8;
}

.highlight .nt {
  color: #c2410c;
}

.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: #374151;
}

/* selection inside code blocks */
.highlighter-rouge code::selection,
.highlighter-rouge code span::selection {
  background: #d9ccff;
  color: #111111;
}

/* mobile */
@media (max-width: 768px) {
  :not(pre) > code {
    white-space: normal;
  }

  .highlighter-rouge code {
    font-size: 0.82rem;
  }

  .highlighter-rouge .highlight::before {
    padding-right: 4.5rem;
  }
}

.testing {
    text-decoration: none;
    list-style-type: none;
    color: #9b9b9b;
    transition: color 0.3s ease;
}

/* 1. Kill the old margin-based approach on .page-content for posts */
.layout-post .page-content {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding: 0;
}

/* Main post container: grid item + centering wrapper */
#main.post {
    position: relative;
    counter-reset: sidenote-counter;
    --margin-note-width: var(--post-notes-col);
    --margin-note-gap:   var(--post-gutter-b);

    grid-column: 3;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    flex-wrap: wrap;
}

#main.post > .post-body{
    width: 100%;
    max-width: var(--post-content-max);
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* POST-STAGE GRID — matches experiment                               */
/* ------------------------------------------------------------------ */

.post-stage{
  display: grid;
  grid-template-columns:
    var(--post-toc-col)
    var(--post-gutter-a)
    var(--post-content-col)
    var(--post-gutter-b)
    var(--post-notes-col)
    var(--post-gutter-c);
  align-items: start;
  width: 100%;
}

.post-stage > #left-toc.left-toc,
.post-stage > #main.post,
.post-stage > .right-gutter{
  min-width: 0;
}

/* TOC column */
.post-stage > #left-toc.left-toc{
  grid-column: 1;
  position: sticky;
  top: 0;
  padding: 14px 12px;
  margin: 0;
  overflow: hidden;
  z-index: 20;

  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 97vh;

  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--backup-text-color-v2);

  --snake-top: 0px;
  --snake-h: 0px;
}

/* Inner rail viewport */
.post-stage > #left-toc.left-toc .toc-rail{
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Inner list container */
.post-stage > #left-toc.left-toc .toc-inner{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}


/* Right notes column */
.post-stage > .right-gutter{
  grid-column: 5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  position: relative;
}

.post-stage > .right-gutter > .right-gutter-inner{
  position: relative;
  width: 100%;
  max-width: var(--post-notes-max);
  min-height: 100vh;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Gutter notes (footnotes moved to right column by footnotes-to-gutter.js) */
/* ------------------------------------------------------------------ */

.gutter-note {
  width: 100%;
  margin-bottom: 1.15rem;
}

.gutter-note-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: start;
}

.gutter-note-number {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  color: var(--backup-text-color-v3);
  min-width: 0.9rem;
  line-height: 1.35;
}

.gutter-note-body,
.gutter-note-body p {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--backup-text-color-v2);
}

.gutter-note-body p + p {
  margin-top: 0.25rem;
}

.gutter-note a {
  color: var(--backup-text-color-v2);
}

.gutter-note a:hover {
  color: var(--main-accent);
}

.gutter-note code {
  font-size: 0.68rem;
  background-color: var(--backup-text-color-v5);
}


/* ------------------------------------------------------------------ */
/* POST TOC — experiment style                                        */
/* ------------------------------------------------------------------ */

.post-stage > #left-toc.left-toc .toc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-stage > #left-toc.left-toc .toc-title-item{
  flex: 0 0 4.5rem;
  min-height: 4.5rem;
}

.post-stage > #left-toc.left-toc .toc-item{
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 10px 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 28px;
  user-select: none;
  color: var(--contrast-color);
}

.post-stage > #left-toc.left-toc .toc-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d8d8d8;
  pointer-events: none;
  z-index: 0;
  transition: background 0.35s ease, opacity 0.28s ease;
}

.post-stage > #left-toc.left-toc .toc-item::after{
  content: "";
  position: absolute;
  left: 0;
  top: var(--snake-top, 0px);
  height: var(--snake-h, 0px);
  width: 2px;
  background: var(--contrast-color);
  pointer-events: none;
  z-index: 0;
  transition: top 0.08s ease-out, height 0.08s ease-out, opacity 0.28s ease;
}

.post-stage > #left-toc.left-toc .toc-item:hover::before{
  background: var(--contrast-color);
}

.post-stage > #left-toc.left-toc .toc-item > a{
  position: relative;
  z-index: 1;
  color: var(--backup-text-color-v2);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.28s ease, color 0.35s ease;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
}

.post-stage > #left-toc.left-toc .toc-item:hover > a{
  color: var(--contrast-color);
}

/* initial open state */
body.toc-open .post-stage > #left-toc.left-toc .toc-item > a{
  opacity: 1;
}

/* collapsed state, reveal on hover */
body.toc-collapsed .post-stage > #left-toc.left-toc:hover .toc-item > a{
  opacity: 1;
}

/* first TOC item text animation */
.post-stage > #left-toc.left-toc .toc-item:first-child > a{
  transform: translateY(8px);
  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.15s ease;
}

/* hide first TOC item while title is visible */
body.title-hidden .post-stage > #left-toc.left-toc .toc-item:first-child > a{
  opacity: 0;
  transform: translateY(6px);
}

body.title-hidden .post-stage > #left-toc.left-toc .toc-item:first-child::before,
body.title-hidden .post-stage > #left-toc.left-toc .toc-item:first-child::after{
  opacity: 0;
}

/* reveal first TOC item after title scrolls away */
body.title-toc-visible .post-stage > #left-toc.left-toc .toc-item:first-child > a{
  opacity: 1;
  transform: translateY(0);
}

/* keep scrollspy color behavior */
.post-stage > #left-toc.left-toc .toc-item > a.toc-active{
  color: var(--contrast-color);
}

.post-stage > #left-toc.left-toc .toc-item > a[href^="#"]:hover:not(.toc-active){
  color: var(--main-accent);
  text-decoration: none;
}

/* indentation */
.post-stage > #left-toc.left-toc .toc-level-1{ padding-left: 12px; }
.post-stage > #left-toc.left-toc .toc-level-2{ padding-left: 12px; }
.post-stage > #left-toc.left-toc .toc-level-3{ padding-left: 24px; }
.post-stage > #left-toc.left-toc .toc-level-4{ padding-left: 36px; }
.post-stage > #left-toc.left-toc .toc-level-5{ padding-left: 48px; }
.post-stage > #left-toc.left-toc .toc-level-6{ padding-left: 60px; }

.post-stage > #left-toc.left-toc .toc-item:first-child > a{
  font-family: 'Inter', sans-serif;
}

/* POST-TOP: breadcrumbs, meta, title — centered to match the grid */
/* Post-top block: share same 6-column grid as post-stage */
.post-top{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}

.post-top .post-meta-row {
    display: flex;
    align-items: flex-start;    
    gap: 2rem;
}

.post-top .post-meta-date .date-post,
.post-top .post-meta-last-modified .date-post-mono {
  margin: 0;
}

.post-top .post-meta-section-text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  color: rgb(0, 62, 231);
  line-height: 0.9;
}

.post-top .post-meta-section-icon {
  width: 0.72rem !important;
  min-width: 0.72rem;
  max-width: none !important;
  height: auto !important;
}

.post-top > .post-header,
.post-top > .post-metadata,
.post-top > .post-intro.post{
  grid-column: 3;
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.post-top > .post-header > *,
.post-top > .post-metadata > *,
.post-top > .post-intro.post > *{
  width: 100%;
  max-width: var(--post-content-max);
}

/* ------------------------------------------------------------------ */
/* SIDENOTES (margin notes on right) */

#main.post .sidenote,
#main.post .marginnote {
    float: right;
    clear: right;
    width: var(--margin-note-width);
    margin-right: calc(-1 * var(--margin-note-width) - var(--margin-note-gap));
    font-size: 1rem;
    line-height: 1.4;
    color: var(--backup-text-color-v3);
}

/* numbering */

#main.post .sidenote-number {
    counter-increment: sidenote-counter;
    pointer-events: none;
}

#main.post .sidenote-number::after {
    content: counter(sidenote-counter);
    font-size: 0.8rem;
    vertical-align: super;
    margin-left: 0.1rem;
    color: var(--backup-text-color-v3);
}

#main.post .sidenote::before {
    content: counter(sidenote-counter);
    font-size: 1rem;
    display: inline-block;
    margin-right: 0.25rem;
    color: var(--backup-text-color-v3);
}

/* blockquotes + margin notes */
#main.post blockquote .sidenote,
#main.post blockquote .marginnote {
    text-align: left;
}

#main.post .sidenote,
#main.post .marginnote {
    float: right;
    clear: right;
    width: var(--margin-note-width);
    margin-right: calc(-1 * var(--margin-note-width) - var(--margin-note-gap));
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--backup-text-color-v3);
    margin-bottom: 2rem;
}

/* NEW: override <p> inside margin notes */
#main.post .sidenote p,
#main.post .marginnote p {
    font-family: 'Crimson Pro', serif;   
    font-size: 1rem;
    line-height: 1.4;
    color: var(--backup-text-color-v2);
    margin: 0;                           /* remove extra paragraph margin */
}

/* ------------------------------------------------------------------ */
/* (007) – ARCHIVE / INDEX PAGES (SORT-STYLE LIST)                    */
/* ------------------------------------------------------------------ */

/* .archive-card {
    padding: 3.5rem 4rem;
    box-sizing: border-box;
} */

.archive-card {
    padding: 3.5rem 4rem;
    box-sizing: border-box;
    position: relative; 
    /* remove any margins that might affect positioning */
}

/* remove bullets + reset spacing */
.archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
}

.archive-wrapper{
    min-height: 100vh;
    justify-content: center;     /* center card horizontally */
    align-items: flex-start;     /* do NOT vertically center */
    padding-top: 50vh;           /* card starts at middle of viewport */
    box-sizing: border-box;
}

.archive-section-title {
    text-transform: uppercase;
    color: var(--backup-text-color-v3);
    margin-bottom: 2rem;
}


/* title (left column) */
.archive-title {
    text-decoration: none;
    color: #333333;
    font-weight: 400;
}

.archive-title:hover {
    color: #000000;
    text-decoration: none;
}

.archive-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    /* by default left-aligned; if you want it closer to the date: */
    /* text-align: right; */
}

.archive-footer a {
    color: inherit;
    text-decoration: none;
}

.archive-footer a:hover {
    text-decoration: underline;
}

/* 5. Mobile: collapse everything to single column */
@media (max-width: 1024px){
    /* Zero gutters that cause horizontal overflow */
    .layout-post .post-meta-container-left-side {
      padding-right: 0;
    }

    /* Let flex children shrink so BREADCRUMBS [space-between] HOME ABOUT fits within width */
    .layout-post .post-meta-container {
      min-width: 0;
      align-items: center;
    }
    .layout-post .post-meta-container-left-side {
      min-width: 0;
      overflow: hidden;
    }
    .layout-post .post-meta-container-left-side .breadcrumbs,
    .layout-post .post-meta-container-left-side .breadcrumbs a {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-transform: none;
    }
    .layout-post .post-meta-container-right-side {
      display: none;
    }

    .layout-post .mobile-post-menu-shell {
      --mobile-post-menu-sticky-top: 1rem;
      --mobile-post-menu-sticky-right: 1.25rem;
      display: block;
      position: relative;
      flex: 0 0 auto;
      margin-left: auto;
      z-index: 80;
    }

    .layout-post .mobile-post-menu-shell.is-sticky {
      position: fixed;
      top: var(--mobile-post-menu-sticky-top);
      right: var(--mobile-post-menu-sticky-right);
      margin-left: 0;
    }

    .layout-post .mobile-post-menu-toggle {
      position: relative;
      z-index: 82;
      width: 2.85rem;
      height: 2.85rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.24rem;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.52);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: top 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .layout-post .mobile-post-menu-shell.is-sticky .mobile-post-menu-toggle,
    body.mobile-post-menu-open.layout-post .mobile-post-menu-toggle {
      background: transparent;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .layout-post .mobile-post-menu-backdrop[hidden],
    .layout-post .mobile-post-menu-panel[hidden] {
      display: none;
    }

    .layout-post .mobile-post-menu-backdrop {
      position: fixed;
      inset: 0;
      z-index: 70;
      background: rgba(248, 248, 246, 0.36);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .layout-post .mobile-post-menu-panel {
      position: fixed;
      top: 4.55rem;
      left: 1rem;
      right: 1rem;
      z-index: 81;
      width: auto;
      max-height: calc(100vh - 6rem);
      overflow: auto;
      border-radius: 1.35rem;
    }

    .layout-post .mobile-post-menu-panel-inner {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      padding: 1rem;
      text-align: left;
    }

    .layout-post .mobile-post-menu-toc {
      min-width: 0;
    }

    .layout-post .mobile-post-menu-label {
      color: var(--backup-text-color-v3);
      font-family: 'Inter', sans-serif;
      font-size: 2rem;
      font-weight: 600;
    }

    .layout-post .mobile-post-menu-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .layout-post .mobile-post-menu-item--title {
      padding-bottom: 0.5rem;
      margin-bottom: 0.1rem;
    }

    .layout-post .mobile-post-menu-link {
      display: block;
      color: var(--backup-text-color-v2);
      text-decoration: none;
      font-family: 'Crimson Pro', serif;
      font-size: 1rem;
      line-height: 1.28;
    }

    .layout-post .mobile-post-menu-item--title .mobile-post-menu-link {
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      color: var(--backup-text-color-v3);
    }

    .layout-post .mobile-post-menu-level-3 { padding-left: 0.75rem; }
    .layout-post .mobile-post-menu-level-4 { padding-left: 1.35rem; }
    .layout-post .mobile-post-menu-level-5 { padding-left: 1.95rem; }
    .layout-post .mobile-post-menu-level-6 { padding-left: 2.55rem; }

    .layout-post .mobile-post-menu-nav {
      display: inline-flex;
      width: fit-content;
      padding-top: 1rem;
      color: var(--backup-text-color-v3);
      text-decoration: none;
      font-family: 'Inter', sans-serif;
      font-size: 2rem;
      font-weight: 600;
    }

    body.mobile-post-menu-open.layout-post {
      overflow: hidden;
    }

    .post-top{
      grid-template-columns: 1fr;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      margin-bottom: 2rem;
    }
  
    .post-top > .post-header,
    .post-top > .post-metadata,
    .post-top > .post-intro.post{
      grid-column: 1;
    }
  
    .post-stage{
      grid-template-columns: 1fr;
      padding: 0 1.5rem;
      max-width: 100%;
      box-sizing: border-box;
    }
    .layout-post .post-wrapper,
    .layout-post .post-outer {
      max-width: 100%;
      box-sizing: border-box;
    }
  
    .post-stage > #left-toc.left-toc{
      display: none;
    }
  
    .post-stage > .right-gutter{
      display: none;
    }
  
    .post-stage > #main.post{
      grid-column: 1;
    }
  
    .post-stage > #main.post > .post-body{
      max-width: none;
    }
  
    #main.post .sidenote,
    #main.post .marginnote{
      float: none;
      clear: both;
      margin: 0.75rem 0;
      width: 100%;
    }
  
    #main.post .sidenote-number::after{
      display: none;
    }
  }
  


/* ----------------- */
/* Responsive tweak  */
/* ----------------- */

@media (max-width: 768px) {
    .archive-card {
        padding: 2.5rem 1.75rem;
        width: 100%;
        margin: 0 1rem;
    }

    .archive-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ------------------------------------------------------------------ */
/* (007) – ARCHIVE / INDEX PAGES (SORT-STYLE LIST)                    */
/* ------------------------------------------------------------------ */

/* WRITING / ARCHIVE: title top-left on load, list starts at 50vh, normal scroll */

.archive-wrapper{
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;

  /* this is what makes the list begin at the middle of the viewport */
  padding-top: 50vh;

  /* IMPORTANT: if you previously used grid, kill it */
  display: block;
}

.archive-section-title{
  position: absolute;
  top: var(--archive-title-top);
  left: var(--archive-gutter);

  /* nuke global h2 margins */
  margin: 0;

  font-size: 3rem;
  font-weight: 650;
  text-transform: capitalize;
  color: #ff0000;

  /* keep it from weird centering inherited elsewhere */
  text-align: left;
}

.archive-card{
  /* these are your side margins */
  padding: 0 var(--archive-gutter) 3.5rem var(--archive-gutter);
  margin: 0;
  box-sizing: border-box;
}

/* remove bullets + reset spacing */
.archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--backup-text-color-v3);
}

/* Base archive item styles - flex row layout */
.archive-item {
    display: flex;
    align-items: baseline;
    width: 100%;
    gap: 2.5rem;
    padding: 0.4rem 0;
}

.archive-item:hover {
    color: black
}

/* title (left column) */
.archive-title {
    text-decoration: none;
    color: #333333;
    font-weight: 400;
}

.archive-title:hover {
    color: #000000;
    text-decoration: none;
}

.archive-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
}

.tags-holder--archive {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* ARCHIVE: hovering the whole row unravels the tag pills              */
/* ------------------------------------------------------------------ */

/* Row hover -> unroll all pills (same as .tags-holder:hover) */
.archive-item:hover .tags-holder .tag-pill {
    margin-left: 0.25rem;              /* stop overlap */
    padding: 0 0.5rem 0 0.15rem;       /* pill padding */
    background-color: var(--background-color);
}
  
  /* keep the first pill flush-left */
.archive-item:hover .tags-holder .tag-pill:first-child {
margin-left: 0;
}
  
.archive-item:hover .tags-holder .tag-pill-dot {
margin-right: 0.1rem;
}

.archive-item:hover .tags-holder .tag-pill-label {
max-width: 12rem;
opacity: 1;
color: var(--contrast-color);

/* show immediately on row hover */
transition:
    opacity     0.26s cubic-bezier(0.4, 0.0, 0.2, 1) 0s,
    margin-left 0.26s cubic-bezier(0.4, 0.0, 0.2, 1) 0s,
    max-width   0.26s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}

/* Optional: keyboard accessibility (tab into a link inside the row) */
.archive-item:focus-within .tags-holder .tag-pill {
margin-left: 0.25rem;
padding: 0 0.5rem 0 0.15rem;
background-color: var(--background-color);
}
.archive-item:focus-within .tags-holder .tag-pill:first-child {
margin-left: 0;
}
.archive-item:focus-within .tags-holder .tag-pill-dot {
margin-right: 0.1rem;
}
.archive-item:focus-within .tags-holder .tag-pill-label {
max-width: 8rem;
opacity: 1;
}


.archive-list a.archive-title:any-link {
color: var(--backup-text-color-v3);
}

.archive-list li {
    color: var(--backup-text-color-v3);
}

.archive-item:hover a.archive-title:any-link {
color: black;
text-decoration: none;
transition: color 0.5s ease;
}

/* Make TYPE react to hovering anywhere in the row */
.archive-item:hover .archive-type{
  color: black;
  transition: color 0.5s ease;
}

/* Optional: keyboard nav parity */
.archive-item:focus-within .archive-type{
  color: black;
}

.archive-item:hover .archive-date {
    color: black;
    transition: color 0.5s ease;
}

/* Make tag label text go black when the row is hovered */
.archive-item:hover .tags-holder .tag-pill:not(:hover) .tag-pill-label{
  color: var(--contrast-color);
}

/* Optional: keyboard parity (tabbing into a row) */
.archive-item:focus-within .tags-holder .tag-pill:not(:hover) .tag-pill-label{
  color: var(--contrast-color);
}

/* date (right column) */
.archive-date {
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
margin-left: 2rem;
font-family: 'Inter', sans-serif;
}

.archive-footer a {
    color: inherit;
    text-decoration: none;
}

.archive-footer a:hover {
    text-decoration: underline;
}

/* Header row: title (left) + top nav (right) aligned on baseline */
.archive-header{
  position: absolute;
  top: var(--archive-title-top);
  left: var(--archive-gutter);
  right: var(--archive-gutter);

  display: flex;
  justify-content: space-between;
  align-items: baseline; /* this is the key: baseline-align the text */
  z-index: 10;
}

.archive-title-group{
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

/* Title is no longer absolutely positioned (the header handles layout) */
.archive-section-title{
  position: static;   /* overrides your earlier absolute */
  margin: 0;
  line-height: 0.95;
  color: #180023;
}

.archive-section-icon{
  width: 2.6rem;
  height: auto;
  flex: 0 0 auto;
  display: block;
  opacity: 0.2;
}

/* tag page: "tag:" prefix in light grey */
.archive-section-title-prefix {
  color: var(--backup-text-color-v3);
  text-transform: lowercase;
}

/* The top-right nav styling */
.archive-topnav{
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #9b9b99;

  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  position: relative;
}

.archive-topnav a{
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.archive-nav-trigger{
  display: inline-block;
}

.archive-topnav a:-webkit-any-link:hover,
.archive-topnav a:any-link:hover{
  color: #000000;
  text-decoration: none;
}

.post-meta-container .archive-topnav {
  font-size: var(--post-meta-nav-size);
  color: var(--post-meta-nav-color);
  font-weight: var(--post-meta-nav-weight);
}

.post-meta-container .archive-topnav a:-webkit-any-link:hover,
.post-meta-container .archive-topnav a:any-link:hover,
.post-meta-container .archive-topnav a:focus-visible,
.post-meta-container .breadcrumbs a:focus-visible {
  color: var(--contrast-color);
  text-decoration: none;
}

.archive-card,
.archive-title-group,
.archive-header > .archive-section-title,
.archive-topnav > .search-slot,
.archive-topnav > a:not(.archive-nav-trigger){
  transition: filter 0.22s ease, opacity 0.22s ease;
}

body.nav-open .archive-card,
body.nav-open .archive-title-group,
body.nav-open .archive-header > .archive-section-title,
body.nav-open .archive-topnav > .search-slot,
body.nav-open .archive-topnav > a:not(.archive-nav-trigger){
  filter: blur(var(--search-blur));
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}

body.nav-open .archive-nav-trigger{
  position: relative;
  z-index: 260;
}

body.nav-open .archive-nav-trigger,
body.nav-open .archive-nav-trigger:-webkit-any-link:hover,
body.nav-open .archive-nav-trigger:any-link:hover{
  color: #000000;
  text-decoration: none;
}

.archive-nav-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 250;
}

body.nav-open .archive-nav-overlay{
  opacity: 1;
  pointer-events: auto;
}

.archive-nav-panel{
  text-align: center;
}

.archive-nav-list{
  align-items: center;
}

.archive-nav-panel.home-nav{
  text-align: center;
}

.archive-nav-panel .home-nav-list{
  gap: 0.25rem;
}

.archive-nav-panel .home-nav-link{
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  color: var(--backup-text-color-v2);
}

.archive-nav-panel .home-nav-link--icon{
  width: fit-content;
  margin: 0 auto;
}

.archive-nav-panel .home-nav-link:hover,
.archive-nav-panel .home-nav-link:focus-visible{
  color: var(--contrast-color);
  text-decoration: none;
}

.layout-post .post-top .post-meta-container-left-side,
.layout-post .post-top > .post-intro.post,
.layout-post .post-top > .post-metadata,
.layout-post .post-body-content,
.layout-post .post-stage > #left-toc.left-toc,
.layout-post .right-gutter{
  transition: filter 0.22s ease, opacity 0.22s ease;
}

body.nav-open.layout-post .post-top .post-meta-container-left-side,
body.nav-open.layout-post .post-top > .post-intro.post,
body.nav-open.layout-post .post-top > .post-metadata,
body.nav-open.layout-post .post-body-content,
body.nav-open.layout-post .post-stage > #left-toc.left-toc,
body.nav-open.layout-post .right-gutter{
  filter: blur(var(--search-blur));
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}

body.search-open .archive-card{
  filter: blur(var(--search-blur));
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.search-slot{
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.search-trigger{
  cursor: pointer;
  display: inline-block;
  transform-origin: right center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

body.search-open .search-trigger{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9) translateX(4px);
  position: absolute;
  right: 0;
}

.search-bar{
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  transition:
    width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease 0.12s;
}

body.search-open .search-bar{
  width: var(--search-bar-width);
  opacity: 1;
  pointer-events: auto;
  transition:
    width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease 0.1s;
}

.search-input,
.search-page-input{
  width: 100%;
  padding: 0;
  padding-bottom: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1;
  color: #b3b3b3;
  -webkit-text-fill-color: #b3b3b3;
  caret-color: #b3b3b3;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--backup-text-color-v3);
  outline: none;
  transition: border-color 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.search-input::-webkit-search-cancel-button,
.search-page-input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  display: none;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.search-input::-webkit-search-decoration,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration,
.search-input::-ms-clear,
.search-input::-ms-reveal,
.search-page-input::-webkit-search-decoration,
.search-page-input::-webkit-search-results-button,
.search-page-input::-webkit-search-results-decoration,
.search-page-input::-ms-clear,
.search-page-input::-ms-reveal{
  display: none;
}

.search-input::placeholder,
.search-page-input::placeholder{
  color: #b3b3b3;
  font-weight: 400;
}

.search-input:focus,
.search-page-input:focus{
  border-bottom-color: var(--contrast-color);
}

.search-actions{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  margin-left: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease 0.28s;
}

body.search-open .search-actions{
  opacity: 1;
}

.search-clear{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--backup-text-color-v3);
  transition: color 0.18s ease, transform 0.18s ease;
  opacity: 0;
  pointer-events: none;
  position: relative;
}

.search-clear.visible{
  opacity: 1;
  pointer-events: auto;
}

.search-clear:hover{
  color: var(--contrast-color);
  transform: scale(1.1);
}

.search-clear::before,
.search-clear::after{
  content: '';
  position: absolute;
  width: 0.5625rem;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
}

.search-clear::before{
  transform: rotate(45deg);
}

.search-clear::after{
  transform: rotate(-45deg);
}

.search-close,
.search-page-clear{
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--backup-text-color-v3);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

.search-close:hover,
.search-page-clear:hover,
.search-close:focus-visible,
.search-page-clear:focus-visible{
  color: var(--contrast-color);
}

.search-page-clear{
  opacity: 0;
  pointer-events: none;
}

.search-page-clear.visible{
  opacity: 1;
  pointer-events: auto;
}

.search-actions-sep{
  width: 1px;
  height: 0.7em;
  background: var(--backup-text-color-v4);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.search-actions-sep.visible{
  opacity: 1;
}

.search-dropdown{
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  overscroll-behavior: contain;
}

.search-dropdown.visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--backup-text-color-v3);
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 1;
}

.search-controls-label{
  color: var(--backup-text-color-v3);
}

.scope-pills,
.sort-pills{
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.scope-pill,
.sort-pill{
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: 1.3;
}

.scope-pill:hover,
.sort-pill:hover{
  color: var(--backup-text-color);
}

.scope-pill.active{
  border-color: var(--backup-text-color-v3);
  color: var(--contrast-color);
}

.sort-pill.active{
  color: var(--contrast-color);
}

.sort-sep{
  color: var(--backup-text-color-v4);
  user-select: none;
}

.search-result,
.search-result:any-link{
  display: block;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.12s ease;
  color: inherit;
  text-decoration: none;
}

.search-result:last-of-type{
  border-bottom: none;
}

.search-result:hover,
.search-result:any-link:hover,
.search-result.kb-active{
  background: rgba(255,255,255,0.5);
  color: inherit;
  text-decoration: none;
}

.result-title{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--contrast-color);
  line-height: 1.35;
  margin-bottom: 0.2rem;
}

.result-meta{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: var(--backup-text-color-v3);
  margin-bottom: 0.25rem;
}

.result-meta .r-tag{
  display: inline;
}

.result-meta .r-cat{
  text-transform: capitalize;
}

.result-excerpt{
  display: block;
  font-family: 'Crimson Pro', serif;
  font-size: 0.82rem;
  color: var(--backup-text-color-v2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-excerpt mark,
.result-title mark{
  background: transparent;
  color: var(--contrast-color);
  font-weight: 700;
}

.search-footer{
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--backup-text-color-v3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  bottom: 0;
  background: transparent;
}

.search-footer a,
.search-footer a:any-link{
  color: var(--backup-text-color-v2);
  font-weight: 500;
  text-decoration: none;
}

.search-footer a:hover,
.search-footer a:any-link:hover{
  color: var(--contrast-color);
  text-decoration: underline;
}

.search-empty{
  padding: 1.5rem 0.75rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--backup-text-color-v3);
}

.search-empty strong,
.search-page-empty strong{
  display: block;
  margin-bottom: 0.35rem;
  color: var(--backup-text-color-v2);
}

.search-kb-hint{
  font-size: 0.6rem;
  color: var(--backup-text-color-v4);
  padding: 0.4rem 0.75rem;
  text-align: right;
}

.search-page-shell{
  max-width: var(--search-page-max);
}

.search-page-lede{
  margin: 0 0 1.75rem 0;
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--backup-text-color-v2);
}

.search-page-input-row{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.search-page-input{
  font-size: 1.1rem;
}

.search-page-results{
  min-height: 10rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.search-page-results .search-controls{
  background: rgba(255, 255, 255, 0.96);
}

.search-page-results .search-footer{
  position: static;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.search-page-empty{
  padding: 1.25rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--backup-text-color-v3);
}

.search-page-empty span{
  display: block;
}

.search-controls--stacked{
  position: static;
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.search-controls-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-controls-row--sort{
  padding-top: 0.2rem;
}

.kind-pills{
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}

.kind-pill{
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--backup-text-color-v3);
  line-height: 1.3;
}

.kind-pill:hover{
  color: var(--backup-text-color);
}

.kind-pill.active{
  border-color: var(--backup-text-color-v3);
  color: var(--contrast-color);
}

.search-status{
  margin: 0.75rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--backup-text-color-v3);
}

.search-status--error{
  color: #8c6b6b;
}

.search-groups,
.search-discovery{
  display: grid;
  gap: 1.35rem;
  padding-top: 1.1rem;
}

.search-group,
.search-discovery-group{
  display: grid;
  gap: 0.6rem;
}

.search-group-heading{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-group-title{
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--contrast-color);
}

.search-group-meta{
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--backup-text-color-v3);
}

.search-group-results{
  display: grid;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.search-result--topic .result-title{
  text-transform: lowercase;
}

.result-kicker{
  display: block;
  margin-bottom: 0.18rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--backup-text-color-v3);
}

.search-theme-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.search-theme-pill,
.search-theme-pill:any-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 999px;
  color: var(--backup-text-color-v2);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.search-theme-pill:hover,
.search-theme-pill:any-link:hover{
  color: var(--contrast-color);
  border-color: var(--backup-text-color-v3);
  text-decoration: none;
}

.search-theme-pill-label{
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
}

.search-theme-pill-count{
  font-family: 'SF Mono Nerd', monospace;
  font-size: 0.62rem;
  color: var(--backup-text-color-v3);
}

.search-footer--page{
  margin-top: 1.2rem;
  position: static;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.search-page-empty--rich{
  padding-top: 1rem;
}

/* ------------------------------------------------------------------ */
/* ARCHIVE: percentage-based columns with full width                   */
/* - Simple, predictable layout                                        */
/* - Each column has explicit width percentage                         */
/* ------------------------------------------------------------------ */

.archive-item{
  display: flex;
  align-items: baseline;
  width: 100%;
  gap: 2.5rem;
  padding: 0.4rem 0;
}

/* Critical: allow flex items to shrink; prevents overflow */
.archive-title,
.archive-type,
.archive-meta,
.archive-date{
min-width: 0;
}

/* Base styles for archive columns */
.archive-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
}

.archive-type{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  text-transform: capitalize;
  color: var(--backup-text-color-v3);
}

.archive-type-icon{
  width: 0.72rem;
  height: auto;
  flex: 0 0 auto;
  display: block;
  opacity: 0.3;
  transition: opacity 0.22s ease;
}

.archive-item:hover .archive-type-icon,
.archive-item:focus-within .archive-type-icon{
  opacity: 1;
}

.archive-meta{
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  max-width: 100%;
  overflow: visible;   /* allow pills to visually overflow without moving columns */
}

.archive-date{
  white-space: nowrap;
  text-align: right;
  margin-left: 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Conditional widths based on data-cols attribute                    */
/* ------------------------------------------------------------------ */

/* 3 columns: title / meta / date (Building, Notes, Writing) */
.archive-list[data-cols="3"] .archive-title{ width: 50%; }
.archive-list[data-cols="3"] .archive-meta { width: 37%; }
.archive-list[data-cols="3"] .archive-date { width: 13%; }

/* 4 columns: title / type / meta / date (Archive) */
.archive-list[data-cols="4"] .archive-title{ width: 40%; }
.archive-list[data-cols="4"] .archive-type { width: 12%; }
.archive-list[data-cols="4"] .archive-meta { width: 35%; }
.archive-list[data-cols="4"] .archive-date { width: 13%; }

/* 2 columns: title / date (minimal layout) */
.archive-list[data-cols="2"] .archive-title{ width: 87%; }
.archive-list[data-cols="2"] .archive-date { width: 13%; }

/* Tags wrapping */
.tags-holder--archive{
max-width: 100%;
flex-wrap: wrap;
row-gap: 0.25rem;
align-items: center;
}
  

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* (005) - MOBILE */
/* ----------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 37.5625rem) {
    /* Styles for screens with a minimum width of 37.5625rem (devices larger than phones) */
    /* #menu-overlay   {
        display: none;
    } */

    .menu-button {
        display: none; 
    }

    .menu-content {
        display: none;
    }
}

@media (max-width: 37.5rem) {

    body {
        background-color: var(--background-color);
    }

    .gif-home {
        max-width: 300%;
        height: auto;
        display: block;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25vh;
    }

    .gif-content {
        margin: 0;
        min-height: 100vh;
        overflow: hidden; 
        display: flex;  
        justify-content: center;  
        align-items: center;
    }

    .sidebar{
        margin-left: 10vw;
    }

    .home-sidebar-item::before {
        content: '';
        position: absolute;
        left: 5.2%;
        top: 50%;
        transform: translateY(-50%) scale(0);
        width: 0.5rem;
        height: 0.5rem;
        background-image: var(--empty-ball);
        background-size: cover;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .home-sidebar-item {
        position: relative;
        margin-bottom: 0.625rem;
        color: rgb(144, 144, 144);
        transition: background-color 0.3s, color 0.3s;
    }

    .stickysidebar {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 10vw;
    }

    /* ul */
    .stickysidebar-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    /* li */
    .stickysidebar-list-item {
        position: relative;
        margin-bottom: 0.625rem;
        color: rgb(144, 144, 144);
        transition: background-color 0.3s, color 0.3s;
    }

    .stickysidebar-list-item a{
        color: inherit;
        text-decoration: none;
    }

    .stickysidebar-list-item::before {
        content: '';
        position: absolute;
        left: 6.2%;
        top: 50%;
        transform: translateY(-50%) scale(0);
        width: 0.5rem;
        height: 0.5rem;
        background-image: var(--empty-ball);
        background-size: cover;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .stickysidebar-list-item:hover::before {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    .stickysidebar-list-item:hover {
         color: var(--contrast-color)
    }

    .stickysidebar-list-item a:hover {
        text-decoration: underline;
        color: var(--contrast-color);
    }

    .stickysidebar-list-item a.active {
        font-weight: bold;
        color: var(--contrast-color);
    }

    .stickysidebar ul li a.active::before {
        content: '';
        position: absolute;
        left: 6.2%;
        top: 50%;
        transform: translateY(-50%);
        width: 0.5rem;
        height: 0.5rem;
        background: var(--ball) center center;
        background-size: cover;
        transition: opacity 0.4s ease;
        opacity: 1;
    }

    .stickysidebar ul li a.active:hover::before {
         opacity: 0;
    }

    /* ------------------------------------------- */
    /* Mobile Menu                                 */
    /* ------------------------------------------- */

    #menu-overlay {
        position: fixed;
        top: 0;
        left: -100%; /* Off-screen initially */
        width: 100%;
        height: 200%;
        background-color: var(--background-color); /* Semi-transparent background */
        transition: left 0.3s ease; 
        z-index: 999; /* Make sure it's on top */
    }

    .menu-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
    }
    
    .close-btn {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        cursor: pointer;
        color: white;
    }

    .menu-button {
        position: fixed;
        top: 1.25rem;
        right: 1.25rem;
        z-index: 1000;
        padding: 0.625rem 1.25rem 0.625rem 1.25rem;
        cursor: pointer;
        background-color: var(--background-color);
        color: var(--text-color);
        border: none;
        font-size: 0.75rem;
        text-transform: uppercase;
        overflow: hidden;
    }

    .content {
        margin-top: 10vh;
        min-height: 100vh;
        text-align: left;
    }

    .page-content{
        margin-left: 8vw;
    }

    .content-header img{
        max-width: 100%;
        height: auto;
        display: block;
        margin-top: 0;
        margin-bottom: 1.25rem;
        margin-right: 0;
        margin-left: 0;
        width: 5rem;
    }

    .page-icon {
        max-width: 60% !important;
        height: auto !important;
        display: block !important;
        margin-bottom: 1.25rem !important;
        width: 2.5rem !important;
    }

    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: top;
        margin-bottom: 5vh;
    }

    .page-title {
        font-size: 2rem;
        margin: 0;
        color: var(--contrast-color);
        margin-bottom: 1rem;
        margin-top: 2rem;
    }

    .latest:hover .dark{
        transform: scaleX(0);
    }
    
    .latest:hover .subtitle{
        color: var(--contrast-color);
    }
    
    .latest:hover .latest-post a{
        color: var(--contrast-color);
    }
    
    .latest:hover p {
        color: var(--backup-text-color);
    }
    
    .latest:hover .latest-post-time {
        color: var(--secondary-accent);
    }

    .latest-post{
        margin-bottom: 5vh;
    }

    p{
        font-size: 0.875rem;
    }

    .subhome-description {
        text-align: justify;
        color: #9B9B9B;
        margin-bottom: 5vh;
    }

    .subhome-description-p {
        text-align: justify;
        color: var(--backup-text-color);
        margin-bottom: 0vh;
    }

    .subpage-intro:hover .dark{
        transform: scaleX(0);
    }
    
    .subpage-intro:hover .subhome-description-p{
        color: var(--backup-text-color);
    }

    .subtitle {
        font-weight: 500;
        font-size: 0.875rem;
        color: var(--contrast-color);
        text-align: left;
        margin-top: 5vh;
        margin-bottom: 1vh;
    }

    .latest-post .latest-post-title {
        font-size: 0.875rem;
        text-decoration: none;
        color: var(--contrast-color);
        transition: color 0.3s ease;
        line-height: 0rem;
    }

    .latest-post-time{
        font-size: 0.625rem;
        display: block;
        color: var(--secondary-accent);
        transition: color 0.3s ease;
        margin-bottom: 1vh;
    }

    .latest-post-p {
        margin-top: 1vh;
        margin-bottom: 1vh;
        color: var(--backup-text-color);
        font-size: 0.625rem;
        transition: color 0.3s ease;
    }

    .latest-post-read-more a{
        color: var(--contrast-color);
        font-weight: bold;
        transition: color 0.3s ease;
        font-size: 0.75rem;
    }

    .section-tags{
        margin-bottom: 5vh;
        font-size: 0.875rem;
    }

    .section-tags a{
        color: var(--backup-text-color);
        transition: color 0.3s ease;
        font-size: 0.875rem;
    }

    .topics:hover .dark{
        transform: scaleX(0); 
    }
    
    .topics:hover .subtitle{
        color: var(--contrast-color);
    }
    
    .topics:hover .muted{
        color: var(--backup-text-color);
    }
    
    .topics:hover .section-tags a{
        color: var(--backup-text-color);
    }

    .muted {
        color: var(--backup-text-color);
        font-size: 0.875rem;
    }

    .internal-link {
        color: #9b9b9b;
        transition: color 0.3s ease;
        font-size: 0.75rem;
    }

    .posts li {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .posts-ul {
        margin-bottom: 5vh;
    }

    .all:hover .all-post-item a{
        color: var(--contrast-color);
    }
    
    .all:hover .all-post-item{
        color: var(--contrast-color);
    
    }
    
    .all:hover .dark{
        transform: scaleX(0);
    }
    
    .all:hover .subtitle{
        color: var(--contrast-color);
    }

    .all-post-item a{
        color: var(--contrast-color);
    }

    .all-post-item-title {
        font-size: 0.875rem;
        text-decoration: none;
        list-style: none;
        transition: color 0.3s ease;
    }

    .all-post-time{
        align-self: flex-start;
        font-size: 0.625rem;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        color: var(--secondary-accent);
        transition: color 0.3s ease;
    }

    .all-post-description {
        font-size: 0.625rem;
        color: var(--backup-text-color);
        /* color: var(--backup-text-color-v3);
        display: block;
        margin-top: 0.5vh;
        margin-bottom: 6vh;
        transition: color 0.3s ease; */
    }

    .breadcrumbs{
        font-weight: 500;
        font-size: 0.625rem;
        color: var(--backup-text-color-v3);
        text-transform: uppercase;
        text-align: left;
    }

    .title-post-meta-p {
        font-weight: 400;
        color: var(--backup-text-color-v4);
        font-size: 0.625rem;
        transition: color 0.3s ease;
    }

    .date-post{
        font-size: 0.75rem;
        color: var(--backup-text-color-v3);
    }

    .page-content img {
      width: 100%;
      height: auto;
    }

    h1 {
        font-size: 1.5625rem;
        margin: 0;
        color: var(--contrast-color);
    }

    h2 {
        font-size: 1.125rem;
        font-weight: 400;
        margin-top: 8vh;
        color: var(--contrast-color);
    }

    h3 {
        font-size: 1rem;
        font-weight: 400;
        margin-top: 5vh;
        color: var(--contrast-color);
    }

    h4 {
        font-size: 0.875rem;
        font-weight: 400;
        margin-top: 5vh;
        color: var(--contrast-color);
    }

    h5 {
        font-size: 0.75rem;
        font-weight: 400;
        margin-top: 5vh;
        color: var(--contrast-color);
    }

    h6 {
        font-size: 0.625rem;
        font-weight: 400;
        margin-top: 5vh;
        color: var(--contrast-color);
    }

    .meta-label{
        color: var(--backup-text-color-v4);
    }

    /* Post layout handled by .post-stage collapse and .post-outer > *:not(.post-stage) in 1024px block */
}


/* ------------------------------------------------------------------ */
/* (end of file) */


/* Mobile tuning */
@media (max-width: 600px) {
    /* Post layout: minimal gutters on small screens */
    .layout-post .post-stage {
      padding: 0 2rem;
    }
    .layout-post .post-top {
      padding: 0; 
    }

    .home-title {
        font-size: 3.4rem;
    }
    
    .scribble-name {
        position: absolute;
        top: 1px;
        transform: translateX(70px) rotate(1deg);
        height: 1.3rem;
        pointer-events: none;
    }
    
    .home-subtitle-line {
        font-size: 1.25rem;
    }
    
    .home-nav-link {
        font-size: 1.2rem;
    }
    
        /* scale everything up on iPhone */
        p, li, ul {
            font-size: 1.2rem;
            line-height: 1.55;
        }
    
        h1 { font-size: 2.4rem; }
        h2 { font-size: 1.6rem; }
        h3 { font-size: 1.3rem; }
    
        .home-nav-link {
            font-size: 1.35rem;
        }
    
        .latest-post-p {
            font-size: 0.95rem;
        }
    
        .latest-post-time {
            font-size: 0.8rem;
        }
    
        .all-post-description {
            font-size: 0.85rem;
        }
    
        .footnotes li,
        .footnotes ol li p {
            font-size: 0.85rem;
        }
    
        /* index HUD: stack Bogotá weather/time on top, coords below, centered */
        .inspectHud {
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
        }
    
        .inspectHud .hudRight {
            order: 1;
            justify-content: center;
        }
    
        .inspectHud .hudLeft {
            order: 2;
            align-items: center;
            display: flex;
            flex-direction: column;
        }
    
        .inspectHud .hudTopLine {
            justify-content: center;
        }
    
        .inspectHud .hudName {
            text-align: center;
            margin-top: 0;
        }
    
        .heroCol {
            width: 90%;
        }
    }
    
    /* ------------------------------------------------------------------------- */
    /* Move Later */
    

/* Responsive tweak */
@media (max-width: 768px) {
    :root{
        --archive-gutter: 2rem;
        --archive-title-top: 2rem;
    }

    .layout-post .post-metadata > .meta {
        display: none;
    }

    .layout-post .post-metadata > .post-meta-mobile {
        display: flex;
        flex-direction: column;
    }

    .layout-post .post-meta-mobile-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1rem;
    }

    .layout-post .post-meta-mobile-row .post-meta-date,
    .layout-post .post-meta-mobile-row .post-meta-last-modified,
    .layout-post .post-meta-mobile-row .post-meta-section {
        flex: 0 0 auto;
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .layout-post .post-meta-mobile > .post-meta-tags {
        width: 100%;
    }

    .layout-post .post-meta-tags .tags-holder {
        opacity: 1;
        display: inline;
        gap: 0;
    }

    .layout-post .post-meta-tags .tag-pill {
        display: inline-block;
        white-space: nowrap;
        background: none !important;
        padding: 0 !important;
        margin: 0 0.6rem 0 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        line-height: 0;
        transform: none !important;
        filter: none !important;
    }

    .layout-post .post-meta-tags:hover .tag-pill,
    .layout-post .post-meta-tags .tag-pill:hover,
    .layout-post .post-meta-tags .tags-holder:hover .tag-pill {
        background: none !important;
        padding: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
        filter: none !important;
    }

    .layout-post .post-meta-tags .tag-pill-dot {
        display: none;
    }

    .layout-post .post-meta-tags:hover .tag-pill-dot,
    .layout-post .post-meta-tags .tag-pill:hover .tag-pill-dot,
    .layout-post .post-meta-tags .tags-holder:hover .tag-pill-dot {
        margin-right: 0 !important;
    }

    .layout-post .post-meta-tags .tag-pill-label {
        display: inline !important;
        opacity: 1 !important;
        max-width: none !important;
        line-height: 0;
        font-family: 'Crimson Pro', serif;
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--backup-text-color-v3);
    }

    .layout-post .post-meta-tags:hover .tag-pill-label,
    .layout-post .post-meta-tags .tag-pill:hover .tag-pill-label,
    .layout-post .post-meta-tags .tags-holder:hover .tag-pill-label {
        color: var(--backup-text-color-v3) !important;
    }

    .layout-post .post-meta-tags .tag-pill::before {
        content: "·";
        font-size: 1.5rem;
        line-height: 0;
        vertical-align: middle;
        color: var(--backup-text-color-v3);
    }

    /* 1. NAV above title via order, centered */
    .archive-header {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 2rem;
        gap: 0;
    }

    .archive-topnav {
        order: -1;
        width: 100%;
        justify-content: center;
        font-size: 0.85rem;
        text-align: center;
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .archive-title-group {
        margin: auto 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }

    /* Tag pages skip .archive-title-group, so mirror its mobile centering here. */
    .archive-header > .archive-section-title {
        margin: auto 0;
    }

    .archive-section-icon {
        order: -1;
        width: 2.25rem;
    }

    /* 2. TITLE — centered, equidistant between nav and first post */
    .archive-section-title {
        position: static !important;
        font-size: 3rem;
        text-align: center !important;
        margin: 0;
        padding: 0;
    }

    /* 3. WRAPPER — posts start around 50vh */
    .archive-wrapper {
        padding-top: 0;
        display: block;
        min-height: 100vh;
    }

    .archive-header {
        min-height: 50vh;
        justify-content: flex-start;
    }

    .archive-card {
        padding: 0 2rem 3rem 2rem;
    }

    /* 4. EACH ITEM — title + date same row via flex-wrap, tags below */
    .archive-item {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: 0;
        padding: 1.25rem 0;
        border-bottom: 0.5px solid #e8e8e8;
    }

    /* no divider above first item */
    .archive-list .archive-item:first-child {
        border-top: none;
    }

    /* TITLE: sits left, shrinks to make room for date */
    .archive-item .archive-title {
        order: 1;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.35;
        color: var(--backup-text-color-v2);
        margin-right: 1rem;
    }

    /* DATE: sits right on the same row as title */
    .archive-item .archive-date {
        order: 2;
        width: auto !important;
        flex-shrink: 0;
        font-size: 0.72rem;
        color: var(--backup-text-color-v3);
        white-space: nowrap;
        margin: 0;
    }

    .archive-item .archive-date::after {
        content: "" !important;
    }

    /* Hide type on these mobile layouts */
    .archive-item .archive-type {
        display: none !important;
    }

    /* TAGS: row below title, respects the date column on the right */
    .archive-item .archive-meta {
        order: 3;
        width: auto !important;
        flex: 1 1 100%;
        min-width: 0;
        margin-top: 0.35rem;
        margin-right: 4.5rem;
    }

    .archive-item .tags-holder {
        opacity: 1;
        display: inline;
        gap: 0;
    }

    /* flatten pills to inline text; inline-block keeps dot+label as one unit when wrapping */
    .archive-item .tag-pill {
        display: inline-block !important;
        white-space: nowrap;
        background: none !important;
        padding: 0 !important;
        margin: 0;
        margin-right: 0.6rem;
        border-radius: 0 !important;
        overflow: visible !important;
        line-height: 0;
    }

    /* kill hover/unroll effects on mobile */
    .archive-item:hover .tags-holder .tag-pill,
    .archive-item:focus-within .tags-holder .tag-pill {
        background: none !important;
        padding: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
        filter: none !important;
    }
    .archive-item:hover .tags-holder .tag-pill-label,
    .archive-item:focus-within .tags-holder .tag-pill-label {
        color: var(--backup-text-color-v3) !important;
    }

    .archive-item .tag-pill-dot {
        display: none;
    }

    .archive-item .tag-pill-label {
        display: inline !important;
        opacity: 1 !important;
        max-width: none !important;
        font-size: 0.725rem;
        font-weight: 400;
        color: var(--backup-text-color-v3);
        line-height: 0;
        font-family: 'Crimson Pro', serif;
        font-size: 0.8rem;
    }

    /* dot separator — bigger than tag text */
    .archive-item .tag-pill::before {
        content: "·";
        font-size: 1.5rem;
        line-height: 0;
        vertical-align: middle;
        color: var(--backup-text-color-v3);
    }

    .archive-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}