@charset "UTF-8";
/* ============================================================
   TABLE OF CONTENTS
   1. Reset & base
   2. Layout (page-layout, main-content, sections)
   3. Sidebar (nav, socials, theme toggle, hamburger)
   4. Home / bio
   5. Work & project cards (team + personal projects)
   6. Experience / education / goals
   7. Logs & reader
   8. Now-playing widget
   9. Media queries:
      - >=1051px  desktop-only refinements (consolidated)
      - <=1050px  mobile/tablet layout (consolidated)
      - other breakpoints (1150/900/768/700/600) for
        specific fine-tuning only
   ============================================================ */

/* Reset and Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Sitewide keyboard-focus baseline. Mouse/touch users never see this
   (:focus-visible only fires for keyboard/programmatic focus); keyboard
   users now get a visible ring on every link, button and custom control,
   including ones that had none before (nav icons, social links, resume
   buttons, project cards, credential links). More specific component
   rules further down (log tiles, the reader drawer, translate pills)
   already used this exact color and win over this by specificity. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--focus-ring, #EE964B);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip link — invisible until a keyboard user tabs to it, first stop
   before the sidebar so long nav lists don't have to be tabbed through
   to reach the page content. */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100000;
    background: #1F1D29;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: top 0.2s var(--ease-out);
}

.skip-link:focus-visible,
.skip-link:focus {
    top: 1rem;
    outline: 2px solid var(--focus-ring, #EE964B);
    outline-offset: 2px;
}

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

/* Initial page load transition */
@keyframes fadeInFromBlack {
    0% {
        background: #000;
        opacity: 1;
    }
    100% {
        background: #fff;
        opacity: 0;
    }
}

#entrance-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    opacity: 1;
    animation: fadeInFromBlack 0.8s ease-out forwards;
    pointer-events: none;
}

:root {
    --bg-fade-duration: 1200ms;
    --page-bg: #000;
    --sidebar-width: 160px;

    --km-ink: #1F1D29;
    --km-charcoal: #2B2636;
    --km-plum: #4F406C;
    --km-violet: #5B3B7A;
    --km-orchid: #7A355C;
    --km-sky: #3B5D7A;
    --km-teal: #2E5A73;
    --km-cream: #F7F1EA;
    --km-blush: #F5E4EE;
    --km-apricot: #FDE7D7;
    --km-lavender: #ECE6FB;
    --km-powder: #E8F3FB;
    --km-softblue: #E7F2FA;
    --km-softviolet: #F3E8FB;
    --km-text: #26242E;
    --km-muted: #64606F;
    /* Was #0F72B5 — 4.13:1 against the palest section backgrounds, just
       under the 4.5:1 body-text minimum. Darkened slightly (still reads
       as the same blue) to clear AA everywhere: 4.78:1+. */
    --km-link: #0C68A5;
    --km-border: rgba(38, 36, 46, 0.16);
    --km-card: rgba(255, 255, 255, 0.74);
    --km-card-strong: rgba(255, 255, 255, 0.92);

    /* Spacing scale (4px base). New tokens only — existing rules keep
       their literal values except where a component below is refined. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 9999px;

    /* Elevation scale — dark-surface shadows (most of the site sits on
       dark/mid-tone section backgrounds); reused as-is in light mode,
       where the lower ambient contrast still reads correctly. */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.3);

    /* Motion */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Focus ring — matches the accent orange already used for this exact
       purpose on log tiles, the reader drawer, and highlight cards, now
       applied consistently everywhere else that was missing one. */
    --focus-ring: #EE964B;
}

html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 0;
    scroll-snap-type: y proximity;
}

html,
body {
    height: 100%;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background-color: var(--page-bg, #ffffff);
    transition: background-color var(--bg-fade-duration) cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

* {
    scroll-behavior: inherit;
}

body {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Layout */
.page-layout {
    display: block;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    margin-left: var(--sidebar-width, 160px);
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    max-width: none;
    box-sizing: border-box;
}

section {
    min-height: auto !important;
    height: auto !important;
}

.content-section {
    scroll-snap-align: start;
    min-height: auto;
    padding: 2rem 0;
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transform: translateZ(0);
    contain: layout style paint;
}

.content-section h2 {
    margin-bottom: 0.5rem;
}

/* Light mode default */
footer {
    text-align: center;
    padding: 4rem 1rem 3rem 1rem;
    font-size: 0.9rem;           /* Slightly larger for better readability */
    font-weight: 500;            /* Medium thickness so it doesn't look thin/faint */
    color: #1f2937;              /* Deep, solid charcoal (almost black) */
    opacity: 1 !important;       /* Forces it to ignore any parent transparency */
}

/* Dark mode specific */
body.dark footer {
    color: #e5e7eb;              /* Crisp, bright silver-white */
}

/* Background overlay */
#bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--bg-fade-duration) cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    background-color: transparent;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Foreground switching */
body.light-foreground .sidebar,
body.light-foreground .sidebar a,
body.light-foreground .project-link,
body.light-foreground .social-link {
    color: #ffffff;
    border-color: rgba(40, 40, 43, 0.1);
}

body.dark-foreground .sidebar,
body.dark-foreground .sidebar a,
body.dark-foreground .project-link,
body.dark-foreground .social-link,
body.dark-foreground .theme-toggle {
    color: #28282B;
    border-color: rgba(40, 40, 43, 0.15);
}

body.dark-foreground .theme-toggle {
    background: rgba(40, 40, 43, 0.06);
    border-color: rgba(40, 40, 43, 0.18);
}

body.dark-foreground .theme-toggle:hover {
    background: rgba(40, 40, 43, 0.12);
    border-color: rgba(40, 40, 43, 0.35);
}

/* Sidebar */
.sidebar {
    padding: 1.25rem 0.75rem;
    background: transparent;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: var(--sidebar-width, 160px) !important;
    overflow-y: auto;
    overflow-x: hidden;
    transition: color var(--bg-fade-duration) ease, border-color var(--bg-fade-duration) ease;
    z-index: 10000 !important;
    transform: translateZ(0);
    visibility: visible !important;
    opacity: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-name {
    text-align: center;
    margin-bottom: 1.75rem;
}

.sidebar-name h1 {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: inherit;
    letter-spacing: -0.02em;
}

.pronunciation,
.greeting,
.typed-flags,
.typed-name {
    color: #fffefe;
    display: inline-block;
    transition: opacity 140ms ease;
}

.pronunciation {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 0;
    font-weight: 400;
}

.greeting {
    font-size: 1.25rem;
    opacity: 0.85;
    margin-bottom: 0.75rem;
    font-weight: 400;
}

.typed-flags {
    font-size: 1.4rem;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.typed-name {
    position: relative;
    display: inline-block;
    font-size: clamp(1.2rem, 1.5vw, 1.75rem);
    line-height: 1.1;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.typed-name::after {
    display: none !important;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    text-align: center;
    flex: 1;
    min-height: 0;
}

.sidebar-nav .nav-link,
.nav-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 0.95rem;
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    width: 100%;
    line-height: 1;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    opacity: 1;
    transform: translateY(-2px);
}

.sidebar-nav .nav-link:active {
    transform: scale(0.94);
}

.nav-icon {
    display: block;
    flex-shrink: 0;
}

.sidebar-section {
    padding: 0 1.5rem !important;
    width: 100%;
}

.section-title-small {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0.7;
    color: #fffeff;
    margin-bottom: 6px !important;
    text-align: center;
}

.project-links,
.social-links {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
    align-items: center;
    text-align: center;
    width: 100%;
}

.project-link,
.social-link {
    color: inherit;
    text-decoration: none;
    font-size: 1.25rem;
    transition: color 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    opacity: 0.7;
}

.project-link:hover,
.social-link:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.project-link:active,
.social-link:active {
    transform: scale(0.92);
}

.social-link i,
.project-link i {
    width: 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    color: inherit;
}

/* Theme toggle */
.theme-toggle-wrap {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.theme-toggle {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.theme-icon {
    position: absolute;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

body.theme-light .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

body.theme-light .theme-icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

body.theme-light .theme-toggle {
    background: rgba(40, 40, 43, 0.06);
    border-color: rgba(40, 40, 43, 0.18);
    color: #28282B;
}

body.theme-light .theme-toggle:hover {
    background: rgba(40, 40, 43, 0.12);
    border-color: rgba(40, 40, 43, 0.35);
}

/* Home and bio */
.bio-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto !important;
    gap: 3rem;
    width: 100%;
}

.bio-content-left {
    flex: 1;
    width: 100%;
}

.bio-text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #fffefe;
    font-weight: 400;
    margin-bottom: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
}

.timestamp {
    /* !important: the element also carries an inline font-family from
       older markup (still present in index.html) that would otherwise
       win over this class rule. */
    font-family: 'IBM Plex Mono', 'IBM Plex Sans', monospace !important;
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 400;
}

/* Profile image */
.bio-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 12px; /* replaces the individual top/bottom margins that used to be on each child below */
}

.profile-image-wrapper {
    position: relative;
}

.bio-image-container img,
.profile-image-wrapper img {
    width: 320px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Same reasoning as the social-links reveal below: a tap on a touch
   device satisfies :hover with nothing to "unhover" afterward, so this
   zoom/dim used to stick on the photo after tapping it. Real hover only. */
@media (hover: hover) and (pointer: fine) {
    .profile-image-wrapper:hover img {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.profile-social-links {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Hover-to-reveal only makes sense with a real pointer that can hover
   without committing to a click — gate it to mouse/trackpad devices. */
/* :focus-within alongside :hover matters here specifically: visibility:
   hidden (used to fully remove these from touch layout below) also drops
   an element out of the default tab order, so without this a keyboard
   user tabbing past the photo on a mouse-capable device would skip these
   4 links entirely — hoverable but unreachable. */
@media (hover: hover) and (pointer: fine) {
    .profile-image-wrapper:hover .profile-social-links,
    .profile-image-wrapper:focus-within .profile-social-links {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
}

/* Touch devices have no hover to reveal these with, and permanently
   overlaying them on the photo instead just plants 4 icons on top of
   your face. Move them out of the overlay into a static row below the
   avatar (still inside .profile-image-wrapper, so they stay part of the
   same block — .bio-image-container's column layout handles the gap). */
@media (hover: none), (pointer: coarse) {
    .profile-social-links {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        justify-content: center;
        margin-top: 14px;
    }
}

.profile-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    color: #28282B;
    text-decoration: none;
    font-size: 1.2rem;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.profile-social-link:hover {
    transform: scale(1.1);
    background: #fff;
}

.profile-social-link:active {
    transform: scale(0.95);
}

/* Profile modal */
.profile-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s ease;
}

.profile-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: scaleIn 0.3s ease;
}

.profile-modal-content img {
    width: 100%;
    height: auto;
    max-width: 600px;
    border-radius: 4px;
}

.profile-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.profile-modal-close:hover {
    opacity: 0.7;
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Bio logs & home-page projects */
#bio-logs-list,
#bio-projects-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
    margin-top: 20px;
    width: 100%;
}

.bio-log-card {
    border-bottom: 1px solid #fffeff;
    padding-bottom: 15px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bio-log-card:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.bio-log-card .meta {
    font-size: 0.7rem;
    color: #fffeff;
    font-weight: 600;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 5px;
}

.bio-log-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fffeff;
    margin: 0;
}

/* Buttons */
.resume-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.resume-button {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.resume-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.resume-button:active {
    transform: translateY(-1px) scale(0.97);
    transition: transform 0.1s ease;
}

/* Location map */
.location-map {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* Dark mode: Stamen Toner Lite is a bright B&W style by default, so
       grayscale + a lower brightness dims it to sit against the dark bg. */
    filter: grayscale(100%) brightness(0.9);
    transition: filter 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;

    /* Forces Safari to composite this correctly. Without these, filter +
       border-radius + overflow:hidden on a container whose children use
       transforms (Leaflet's pan/zoom tile pane does) can render as a
       solid black box in Safari/iOS. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Light mode: closer to the tiles' natural bright style, just softened
   and warmed slightly so it doesn't look starkly white against the cream
   page background. */
body.theme-light .location-map {
    background: var(--km-cream);
    filter: grayscale(35%) brightness(1.04) contrast(0.95) sepia(6%);
    box-shadow: 0 10px 24px rgba(38, 36, 46, 0.1);
}

.location-map .leaflet-container {
    background: #1a1a1a;
    font-family: 'IBM Plex Sans', sans-serif;
}

.location-map .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.location-map .leaflet-control-zoom a {
    background: rgba(20, 20, 20, 0.85) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.location-map .leaflet-control-zoom a:hover {
    background: rgba(40, 40, 40, 0.95) !important;
    color: #ffffff !important;
}

.location-map .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.4) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.6rem !important;
}

.location-map .leaflet-control-attribution a {
    color: rgba(255, 255, 255, 0.55) !important;
}

.profile-title-link {
    transition: opacity 0.2s ease;
}

.profile-title-link:hover,
.profile-title-link:focus-visible {
    opacity: 0.8;
}

.map-caption {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
    color: #fffeff;
    text-align: center;
    font-family: 'IBM Plex Sans', sans-serif;
}

.resume-button-view,
.resume-button:not(.resume-button-view) {
    border-color: rgba(255, 255, 255, 0.15);
}

/* About / goals */
.about-section,
.goals-section {
    margin-bottom: 20px;
    padding: 0;
}

.about-section h2,
.goals-section h2,
.about-section p,
.goals-section p {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Work and cards */
.work-section {
    margin-top: 0;
}

.contact-section .work-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    color: #b351b3;
    width: 100%;
    align-items: start;
}

.work-card {
    background: #2e2d2c;
    border: 1px solid #2e2d2c;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.work-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.work-card:active {
    transform: scale(0.988);
}

/* Certifications */
.cert-grid {
    display: flex;
    gap: 0.9rem;
    max-width: min(1440px, 100%);
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.6rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.cert-grid::-webkit-scrollbar {
    height: 6px;
}

.cert-grid::-webkit-scrollbar-track {
    background: transparent;
}

.cert-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

.cert-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.cert-card {
    flex: 1 0 232px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease, border-color 0.3s ease;
}

.cert-card:hover,
.cert-card:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.cert-card:active {
    transform: scale(0.988);
}

.cert-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cert-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
}

.cert-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fffeff;
    margin: 0 0 0.15rem 0;
    line-height: 1.35;
}

.cert-issuer {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.cert-credential-id {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0.75rem 0 0 0;
    font-family: 'IBM Plex Sans', sans-serif;
}

.cert-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.cert-skill-tag {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
}

.cert-credential-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cert-credential-link i {
    font-size: 0.7rem;
}

.cert-credential-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.cert-credential-link:active {
    transform: scale(0.96);
}

.work-card-link {
    text-decoration: none !important;
    display: block !important;
    border-radius: var(--radius-sm);
}

/* Keyboard focus lands on the wrapping <a>, not the inner .work-card, so
   :hover's per-card styling needs a focus-visible counterpart on the
   parent to reach the same elements. */
.work-card-link:focus-visible .work-card {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.work-image {
    height: 200px;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
}

.work-info {
    padding: 1.5rem;
    position: relative;
}

.work-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fffeff;
    margin-bottom: 0.25rem;
}

.work-subtitle {
    font-size: 0.9rem;
    color: #fffefe;
    margin-bottom: 1rem;
    font-weight: 400;
}

.work-year {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 0.85rem;
    color: #999;
    font-weight: 400;
}

.project-card {
    background: #050505;
}

.project-card .project-title-link {
    text-decoration: none;
}

.project-desc {
    color: #fffeff;
    font-size: 0.9rem;
    margin-top: 0.35rem;
    line-height: 1.6;
}

.project-logo {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}

/* Current projects */
.current-projects-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1.25rem !important;
    margin-top: 1.25rem !important;
    width: 100%;
    align-items: start !important;
}

.current-project-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: auto !important;
}

.work-card-link:hover .current-project-card,
.work-card-link:focus-visible .current-project-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.current-project-title {
    color: #fffeff;
    transition: color 0.3s ease !important;
    font-size: 1rem !important;
}

.work-card-link:hover .current-project-title,
.work-card-link:focus-visible .current-project-title {
    color: #ffffff !important;
}

.current-project-logo {
    background: #182B49 !important;
    height: 90px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.85rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 4px;
}

.current-project-logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.current-project-description {
    font-size: 0.85rem !important;
    color: #fffeff;
    line-height: 1.5 !important;
}

/* GitHub project cards */
#projects-grid .project-card {
    padding: 10px;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: auto !important;
    height: fit-content !important;
    text-decoration: none;
}

#projects-grid .project-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

#projects-grid .project-card .work-title {
    font-size: 0.85rem !important;
    margin: 0 !important;
    color: #fff !important;
}

#projects-grid .project-card .project-desc {
    font-size: 0.7rem;
    line-height: 1.25;
    color: #fffeff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#projects-grid .project-card .work-icon {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Experience */
.experience-section {
    background: transparent;
    color: #fffeff;
    padding: 4rem 0;
    width: 100% !important;
}

.experience-container {
    width: 100% !important;
    max-width: 100% !important;
}

.experience-section-header {
    margin-bottom: 2rem;
    margin-top: 3rem;
}

.experience-section-header:first-child {
    margin-top: 0;
}

.experience-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fffeff;
    margin-bottom: 0;
    justify-content: left;
    display: flex;
}

.experience-item {
    margin-bottom: 3rem;
    width: 100%;
}

/* Goals list — list-style-position: inside keeps the marker inline with
   the text ("1. Be a decent human being.") instead of indenting the
   block, matching how this used to be hand-typed into heading tags. */
.goals-list {
    list-style: decimal;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.goals-list li {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 1.25rem 0;
    color: rgba(255, 255, 255, 0.95);
}

.goals-list li:last-child {
    margin-bottom: 0;
}

/* Light-theme text color for this list is already handled by the
   sitewide body.theme-light .content-section :is(..., li, ...) rule
   further down, which covers every <li> inside a .content-section. */

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    width: 100%;
}

.experience-header-left {
    flex: 1;
}

.experience-header-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 220px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.experience-header-right .experience-date {
    order: 1;
}

.experience-header-right .experience-logo-link {
    order: 2;
}

.experience-logo-link {
    text-decoration: none;
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.experience-logo-link:hover,
.experience-logo-link:focus-visible {
    transform: scale(1.05);
    opacity: 0.9;
}

.experience-logo {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
}

.experience-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.experience-role {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fffeff;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.experience-role strong {
    font-weight: 700;
}

.experience-company {
    font-size: 0.95rem;
    color: #fffefe;
    margin-bottom: 0.5rem;
}

.experience-date {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans', monospace;
    font-size: 0.8rem;
    color: #fffefe;
    white-space: normal;
    flex-shrink: 0;
    text-align: right;
    line-height: 1.5;
}

.experience-description {
    font-size: 1.1rem;
    color: #fffefe;
    line-height: 1.65;
    margin-top: 0.5rem;
}

.project-link-inline {
    color: #fffeff;
    text-decoration: underline;
    text-decoration-color: #fffeff;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.experience-activities {
    font-size: 0.9rem;
    color: #fffeff;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.experience-activities strong {
    font-weight: 600;
    color: #fffefe;
}

.experience-bullets {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}

.experience-bullets li {
    font-size: 0.95rem;
    color: #fffeff;
    line-height: 1.6;
    margin-bottom: 0.4rem;
    padding-left: 1.2rem;
    position: relative;
}

.experience-bullets li::before {
    content: none;
    position: absolute;
    left: 0;
    color: #fffeff;
}

/* Logs */
.logs-subtitle {
    color: #fffefe;
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.logs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    width: 100%;
    align-items: start;
}

.log-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    padding: 1.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: fit-content;
}

.log-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.log-card:active {
    transform: scale(0.988);
}

.log-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 0.75rem;
}

.log-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.log-body {
    color: #666;
    line-height: 1.7;
    font-size: 0.95rem;
}

.log-body p {
    margin-bottom: 1.5rem;
}

.log-body p:last-child {
    margin-bottom: 0;
}

.log-body p:first-child {
    margin-top: 0;
}

.log-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.log-tag {
    background: #f5f5f5;
    color: #666;
    padding: 0.25rem 0.6rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 400;
}

/* Logs folder UI */
.logs-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding-top: 20px;
    width: 100%;
}

.logs-section-header {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    width: 100%;
    grid-column: 1 / -1;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    color: var(--text-color, #282828);
}

.logs-list .log-card:nth-last-child(2) {
    align-self: flex-start;
}

.season-folder {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    transition: all 0.3s ease;
}

/* Unified pop-in: same springy entrance for every tracked element,
   whether it's on-screen at page load (fires immediately) or scrolled
   into view later (fires on intersection). Starts hidden... */
.pop-in {
    opacity: 0;
    transform: translateY(18px) scale(0.95);
}

/* ...and animates in once JS adds this class via IntersectionObserver. */
.pop-in.pop-in-visible {
    animation: popIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--pop-delay, 0ms);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pop-in {
        opacity: 1;
        transform: none;
    }
}

.season-folder::-webkit-details-marker,
.season-header::marker {
    display: none;
    content: "";
}

.season-header {
    padding: 12px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'IBM Plex Sans', sans-serif;
}

.season-header:focus-visible {
    outline: 2px solid var(--focus-ring, #EE964B);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.folder-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.folder-title i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.folder-title span {
    color: #ffffff;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.custom-arrow {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.season-folder[open] > summary .custom-arrow {
    transform: rotate(90deg);
}

.logs-preview-list {
    padding: 0 10px 12px 38px;
}

.log-file-row {
    padding: 6px 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-file-row:hover .file-name {
    color: #ffffff;
}

.file-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    font-weight: 400;
    transition: color 0.2s;
}

.file-date {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   LOGS WAYFINDER — category card grid, with an inline drawer
   (not a modal) for browsing into a category's folders/logs.
   Replaces the old <details> accordion tree from renderLogs().
   Each category tile keeps a fixed jewel-tone gradient in both
   themes (verified >=7:1 white-text contrast on every gradient
   stop); only the surrounding chrome (drawer, breadcrumb, entry
   rows) follows the site's light/dark theme.
   ============================================================ */
.logs-wayfinder {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 1.5rem;
    width: 100%;
}

.log-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.log-tile {
    position: relative;
    text-align: left;
    font: inherit;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 20px 18px 18px;
    min-height: 186px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(150deg, var(--a), var(--b));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.log-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4); }
.log-tile:focus-visible { transform: translateY(-4px); outline: 3px solid #EE964B; outline-offset: 2px; }
.log-tile[aria-expanded="true"] { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.8); }
.log-tile:active { transform: translateY(-1px) scale(0.99); }

/* The six tile gradients stay fixed across themes (they carry their own
   contrast-verified white text) — so this text stays white/near-white no
   matter the site theme, not scoped to body.theme-light. Chaining 3
   classes (.logs-wayfinder .log-tile .tile-*) gives this enough
   specificity to beat `body.theme-light .content-section :is(h1,...,
   span,...)` elsewhere, which would otherwise force dark text onto these
   in light mode — without this rule needing body.theme-light itself. */
.logs-wayfinder .log-tile .tile-title,
.logs-wayfinder .log-tile .tile-cta,
.logs-wayfinder .log-tile .tile-icon {
    color: #fff !important;
}

.logs-wayfinder .log-tile .tile-desc,
.logs-wayfinder .log-tile .tile-count {
    color: rgba(255, 255, 255, 0.92) !important;
}

.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.tile-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1rem;
    flex: 0 0 auto;
}

.tile-count {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.22);
    padding: 5px 9px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tile-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 1.28rem;
    line-height: 1.2;
    margin: 16px 0 6px;
}

.tile-desc {
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    flex: 1;
}

.tile-cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 700;
}

.tile-cta i { font-size: 0.75rem; transition: transform 0.15s ease; }
.log-tile:hover .tile-cta i, .log-tile:focus-visible .tile-cta i { transform: translateX(4px); }

/* Drawer — expands inline below the grid, never a modal, so back/close
   is always just "scroll up", not "find the X". */
.drawer-slot { width: 100%; }

.log-drawer {
    --pulse-rgb: 238, 150, 75;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
    padding: 24px clamp(16px, 4vw, 30px) 26px;
    animation: logDrawerIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.log-drawer.pulse { animation: logDrawerIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), logDrawerPulse 1.1s ease 0.15s 1; }

@keyframes logDrawerIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes logDrawerPulse {
    0% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(var(--pulse-rgb), 0.5); }
    40% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(var(--pulse-rgb), 0); }
    100% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(var(--pulse-rgb), 0); }
}

.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }

.drawer-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 4px;
}

.drawer-head h2 { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.5rem; color: #fff; margin: 0; }

.drawer-close {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    font-size: 1.05rem;
}

.drawer-close:hover { background: #EE964B; border-color: #EE964B; color: #241202; }

.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 18px 0;
    padding: 0;
    font-size: 0.87rem;
}

.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:first-child)::before { content: "/"; color: rgba(255, 255, 255, 0.3); }

.breadcrumb button {
    font: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    color: #EE964B;
    background: none;
    border: none;
    padding: 10px 6px;
    min-height: 44px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumb li.current { color: #fff; font-weight: 700; }
.breadcrumb li.current span { padding: 10px 6px; }

.entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.entry-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    font: inherit;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px 8px;
    min-height: 56px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
}

.entry-row:last-child { border-bottom: none; }
.entry-row:hover { background: rgba(238, 150, 75, 0.1); }
.entry-row[disabled] { cursor: default; opacity: 0.5; }
.entry-row[disabled]:hover { background: none; }

.entry-icon { width: 20px; text-align: center; flex: 0 0 auto; color: rgba(255, 255, 255, 0.4); }
.entry-row.is-folder .entry-icon { color: #EE964B; }

.entry-main { flex: 1; min-width: 0; }
.entry-title { font-weight: 600; font-size: 0.95rem; color: #fff; }
.entry-date { font-size: 0.76rem; color: rgba(255, 255, 255, 0.4); margin-top: 2px; font-variant-numeric: tabular-nums; }

.entry-cue { font-size: 0.8rem; font-weight: 700; color: #EE964B; white-space: nowrap; flex: 0 0 auto; }
.entry-row[disabled] .entry-cue { color: rgba(255, 255, 255, 0.4); font-weight: 500; }
.entry-empty { padding: 20px 8px; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; }

.drawer-close:focus-visible,
.breadcrumb button:focus-visible,
.entry-row:focus-visible {
    outline: 2px solid #EE964B;
    outline-offset: 2px;
    background: rgba(238, 150, 75, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .log-tile, .log-drawer, .tile-cta i { transition: none !important; animation: none !important; }
}

@media (max-width: 560px) {
    .log-grid { grid-template-columns: 1fr; }
}

/* Fullscreen reader */
.fullscreen-reader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #2e2d2c;
    z-index: 99999;
    overflow-y: auto;
    font-family: 'IBM Plex Sans', sans-serif;
}

.reader-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 40px;
    text-align: left !important;
}

/* One fixed container with two stacked flex rows (see reader.innerHTML
   in openFullscreenLog) instead of the old .pinned-nav + .reader-top-controls
   pair, which were each independently `position: fixed` and anchored to
   the same top-right corner — on narrow phones the translate pills/theme
   toggle could land right on top of Back/Previous/Next. Stacking them as
   rows inside one box keeps them in a predictable flow at every width. */
.reader-toolbar {
    position: fixed;
    top: 40px;
    left: 40px;
    right: 40px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reader-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Same translucent-pill treatment as .translate-quick-btn (see the
   translate section below) — Back/Previous/Next now read as the same
   family of top-bar chip buttons instead of a separate solid-black style. */
.back-link {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 18px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.back-link:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.back-link:focus-visible {
    outline: 2px solid #EE964B;
    outline-offset: 2px;
}

.scroll-top {
    margin-top: 100px;
    background: transparent;
    color: #555;
    border: none;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.scroll-top:hover {
    color: #fff;
}

.reader-content {
    max-width: 700px;
    margin: 120px auto;
    padding: 0 40px;
}

.reader-body {
    font-family: 'IBM Plex Sans', sans-serif;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    font-size: 1.1rem;
    text-align: left !important;
}

.reader-body p {
    margin-bottom: 1.5rem;
    text-align: left !important;
}

/* Lists (checklists, bucket-list items, etc). Overrides the default UA
   spacing, which otherwise stacks list + list-item margins into large gaps
   between entries. */
.reader-body ul,
.reader-body ol {
    margin: 0 0 1.4rem;
    padding-left: 1.4rem;
}

.reader-body li {
    margin: 0 0 0.4rem;
}

.reader-body li:last-child {
    margin-bottom: 0;
}

/* Photos dropped in via Markdown (`![caption](url)`) — renders to the
   same centered, captioned look as the site's older hand-written
   <figure> blocks, without needing that HTML typed out each time. */
.reader-body figure.log-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;
    max-width: 500px;
    width: 100%;
}

.reader-body figure.log-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.reader-body figure.log-photo figcaption {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
}

/* A nested list directly under a list item indents further under its
   parent instead of sitting almost flush with it. Plain (non-checklist)
   nested items read as a note/caption on the parent (e.g. "Born there"
   under "United States"), so those get de-bulleted and muted; nested
   checklists (e.g. the Vietnam route sub-stops) keep their checkboxes. */
.reader-body li > ul,
.reader-body li > ol {
    margin: 0.3rem 0 0.6rem 1.1rem;
    padding-left: 1.4rem;
}

.reader-body li ul > li:not(:has(> input[type="checkbox"])) {
    position: relative;
    list-style: none;
    margin-bottom: 0.25rem;
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.65;
    padding-left: 0;
}

.reader-body li ul > li:not(:has(> input[type="checkbox"]))::before {
    content: "–";
    position: absolute;
    left: -1.1rem;
}

/* GFM task list checkboxes (- [ ] / - [x]). marked emits a bare
   <input type="checkbox"> as the first child with no wrapper class, so
   detect the item by content rather than a class name. */
.reader-body li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.4rem;
    padding-left: 1.4rem;
}

.reader-body li > input[type="checkbox"] {
    margin: 0 0.6em 0 0;
    transform: translateY(1px);
    accent-color: var(--km-link, #7dd3fc);
}

/* Responsive video embeds (YouTube/Vimeo/etc pasted into log markdown) */
.video-embed-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.75rem 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.video-embed-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block;
}

/* Fallback for any iframe that wasn't caught by the wrapping script */
.reader-body iframe {
    max-width: 100%;
}

.reader-header h1 {
    font-size: 2.8rem;
    color: #fff;
    margin: 10px 0 30px 0;
    line-height: 1.1;
}

.reader-meta {
    color: #fffeff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Groups the theme toggle with the translate pills so both sit together
   as the right-hand side of .reader-toolbar-top (see .reader-toolbar
   above) — no positioning of its own now, it's just a flex item inside
   that row. */
.reader-top-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.reader-theme-toggle {
    position: static;
}

/* Read-aloud controls (see initReaderTTS in script.js) — a speed pill next
   to a play/pause toggle, grouped so they move together at narrow widths. */
.tts-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tts-rate-btn {
    font: inherit;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 12px;
    min-height: 40px;
    min-width: 40px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tts-rate-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.tts-rate-btn:focus-visible {
    outline: 2px solid #EE964B;
    outline-offset: 2px;
}

body.theme-light .tts-rate-btn {
    background: var(--km-card) !important;
    border-color: var(--km-border) !important;
    color: var(--km-text) !important;
}

body.theme-light .tts-rate-btn:hover {
    background: var(--km-card-strong) !important;
}

/* Playing state — same accent orange used throughout the reader's other
   active/hover states. */
.reader-tts-toggle.is-speaking {
    background: rgba(238, 150, 75, 0.18) !important;
    border-color: #EE964B !important;
    color: #EE964B !important;
}

/* Contact */
.contact-content {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.social-links-grid {
    display: flex;
    gap: 3rem;
    margin-top: 2.5rem;
    justify-content: center;
    align-items: center;
}

.social-icon-link {
    color: #fffefe;
    text-decoration: none;
    font-size: 1.75rem;
    opacity: 0.8;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon-link:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
}

.social-icon-link:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.resume-download-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.resume-download-button:hover {
    opacity: 1;
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.05);
}

.resume-download-button i,
.resume-download-link i {
    font-size: 0.9rem;
}

.resume-download-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.social-links-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

/* Hamburger */
.hamburger-menu {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10001;
    /* 44px meets the WCAG 2.5.5 / iOS-HIG minimum touch-target size —
       was 40px. */
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hamburger-menu:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hamburger-menu span {
    display: block;
    width: 22px;
    height: 2px;
    background: #28282B;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: all;
}

/* Desktop layout refinements */
/* ============================================= */
/* DESKTOP-ONLY REFINEMENTS (>=1051px)            */
/* Consolidated from several previously-duplicated */
/* @media (min-width: 1051px) blocks.              */
/* ============================================= */
@media (min-width: 1051px) {
    .page-layout {
        margin-left: var(--sidebar-width, 150px) !important;
    }

    .main-content {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .content-section {
        min-height: auto !important;
        height: auto !important;
    }

    #home {
        padding-top: 3rem !important;
        padding-bottom: 4rem !important;
    }

    #about {
        padding-top: 3.25rem !important;
    }

    #about,
    #goals,
    #experience,
    #education,
    #contact {
        padding-bottom: 2.5rem !important;
    }

    #goals,
    #experience,
    #education,
    #contact {
        padding-top: 2.5rem !important;
    }

    #current-projects,
    #projects,
    #logs {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .bio-section,
    .experience-container,
    .work-section,
    .contact-content,
    .content-section > .experience-section-header,
    .content-section > .experience-item,
    .content-section > .work-section,
    .content-section > .contact-content {
        max-width: 1540px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(42px, 4vw, 88px) !important;
        padding-right: clamp(42px, 4vw, 88px) !important;
        box-sizing: border-box !important;
    }

    .bio-section {
        justify-content: center !important;
        align-items: flex-start !important;
        gap: clamp(3rem, 5vw, 5rem) !important;
    }

    .left-content-column {
        flex: 1 1 760px !important;
        max-width: 980px !important;
        padding-top: 24px !important; /* matches .home-side-column so both columns share one top edge */
    }

    /* .bio-image-container's own sizing/spacing now lives entirely in its
       base rule + .home-side-column (its parent) — no per-breakpoint
       width/margin override needed here. */

    .bio-image-container img,
    .profile-image-wrapper img {
        width: 285px !important;
    }

    .profile-name {
        font-size: 38px !important;
        margin: 0 !important; /* spacing now comes from .bio-image-container's gap */
    }

    .profile-title {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }

    .bio-text {
        font-size: 1.04rem !important;
        line-height: 1.7 !important;
        max-width: 920px !important;
        margin-top: 1.4rem !important;
        margin-bottom: 1.25rem !important;
    }

    .bio-logs-container {
        margin-top: 0.9rem !important;
    }

    .bio-logs-container .section-title-small {
        margin-top: 0 !important;
        margin-bottom: 0.85rem !important;
    }

    #bio-logs-list {
        margin-top: 0.75rem !important;
        gap: 28px 24px !important;
    }

    .bio-log-card {
        padding-bottom: 14px !important;
    }

    .bio-log-card h3 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    .home-videos-row {
        margin-top: 2.25rem !important;
        gap: 1.75rem !important;
    }

    .home-video-card,
    #home .left-content-column > div[style*="display: flex"] > div {
        flex: 1 1 340px !important;
        max-width: 500px !important;
    }

    .home-video-card .section-title-small {
        margin-bottom: 0.85rem !important;
    }

    #home iframe {
        max-height: 280px !important;
    }

    .resume-buttons {
        gap: 0.65rem !important;
    }

    .resume-button {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .experience-section-header {
        margin-top: 2rem !important;
        margin-bottom: 1.25rem !important;
    }

    .experience-section-header:first-child {
        margin-top: 0 !important;
    }

    .experience-title {
        padding-bottom: 0.5rem !important;
    }

    .experience-item {
        margin-bottom: 2rem !important;
    }

    .experience-header {
        gap: 2.25rem !important;
    }

    .experience-header-left {
        max-width: 960px !important;
    }

    .experience-description,
    .experience-bullets,
    .experience-activities,
    .experience-company {
        line-height: 1.55 !important;
    }

    .experience-logo img,
    .experience-header-right img {
        max-width: 260px !important;
    }

    .current-projects-grid,
    .work-grid,
    .logs-grid,
    .logs-list {
        margin-top: 1.25rem !important;
        gap: 1.5rem !important;
    }

    .work-info {
        padding: 1.25rem !important;
    }

    html {
        zoom: 0.8;
    }

    .sidebar {
        height: 125vh !important;
        min-height: 125vh !important;
        bottom: auto !important;
        overflow-y: auto !important;
    }

}

/* Light mode */
body.theme-light {
    --page-bg: var(--km-cream);
    background-color: var(--km-cream) !important;
    color: var(--km-text) !important;
}

body.theme-light .content-section {
    color: var(--km-text) !important;
}

body.theme-light .content-section :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, blockquote),
body.theme-light .reader-content :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, blockquote) {
    color: var(--km-text) !important;
}

body.theme-light .content-section [style*="color: rgba(255,255,255"],
body.theme-light .content-section [style*="color: rgba(255, 255, 255"],
body.theme-light .content-section [style*="color:#fff"],
body.theme-light .content-section [style*="color: #fff"],
body.theme-light .content-section [style*="color:#ffffff"],
body.theme-light .content-section [style*="color: #ffffff"] {
    color: var(--km-text) !important;
}

body.theme-light .timestamp,
body.theme-light .file-date,
body.theme-light .custom-arrow,
body.theme-light .folder-title i,
body.theme-light .bio-log-card .meta,
body.theme-light .logs-subtitle,
body.theme-light .experience-company,
body.theme-light .experience-date {
    color: var(--km-muted) !important;
}

body.theme-light a,
body.theme-light .reader-body a,
body.theme-light .project-link-inline,
body.theme-light a[style*="text-decoration: underline"] {
    color: var(--km-link) !important;
    text-decoration-color: var(--km-link) !important;
}

body.theme-light .experience-title,
body.theme-light .bio-log-card,
body.theme-light .season-folder,
body.theme-light .log-file-row,
body.theme-light .logs-section-header,
body.theme-light .theme-toggle-wrap,
body.theme-light .sidebar {
    border-color: var(--km-border) !important;
}

body.theme-light div[style*="border-bottom: 1px solid rgba(255,255,255"],
body.theme-light div[style*="border-bottom: 1px solid rgba(255, 255, 255"] {
    border-color: var(--km-border) !important;
}

body.theme-light div[style*="border: 1px solid rgba(255, 255, 255, 0.15)"] {
    border-color: var(--km-border) !important;
    box-shadow: 0 10px 24px rgba(38, 36, 46, 0.08) !important;
}

body.theme-light .work-card,
body.theme-light .current-project-card,
body.theme-light #projects-grid .project-card,
body.theme-light .log-card {
    background: var(--km-card) !important;
    border-color: rgba(38, 36, 46, 0.12) !important;
    color: var(--km-text) !important;
    box-shadow: 0 12px 28px rgba(38, 36, 46, 0.05);
}

body.theme-light .work-card:hover,
body.theme-light .current-project-card:hover,
body.theme-light #projects-grid .project-card:hover,
body.theme-light .log-card:hover {
    background: var(--km-card-strong) !important;
    border-color: rgba(38, 36, 46, 0.22) !important;
}

body.theme-light .cert-card {
    background: var(--km-card) !important;
    border-color: rgba(38, 36, 46, 0.12) !important;
}

body.theme-light .cert-grid {
    scrollbar-color: rgba(38, 36, 46, 0.3) transparent;
}

body.theme-light .cert-grid::-webkit-scrollbar-thumb {
    background: rgba(38, 36, 46, 0.3);
}

body.theme-light .cert-card:hover {
    background: var(--km-card-strong) !important;
    border-color: rgba(38, 36, 46, 0.22) !important;
}

body.theme-light .cert-title {
    color: var(--km-text) !important;
}

body.theme-light .cert-issuer,
body.theme-light .cert-credential-id {
    color: rgba(38, 36, 46, 0.6) !important;
}

body.theme-light .cert-skill-tag {
    color: rgba(38, 36, 46, 0.7) !important;
    background: rgba(38, 36, 46, 0.06) !important;
    border-color: rgba(38, 36, 46, 0.12) !important;
}

body.theme-light .cert-credential-link {
    color: var(--km-text) !important;
    border-color: rgba(38, 36, 46, 0.25) !important;
}

body.theme-light .cert-credential-link:hover {
    background: rgba(38, 36, 46, 0.06) !important;
    border-color: rgba(38, 36, 46, 0.4) !important;
}

body.theme-light .work-title,
body.theme-light .work-subtitle,
body.theme-light .project-desc,
body.theme-light .log-title,
body.theme-light .log-body,
body.theme-light .current-project-title,
body.theme-light .current-project-description,
body.theme-light .bio-log-card h3,
body.theme-light .file-name,
body.theme-light .folder-title span {
    color: var(--km-text) !important;
}

/* .work-card-link:hover .current-project-title (dark-mode base rule,
   further up the file) forces #ffffff on hover with 3 class selectors of
   specificity — higher than the plain-state override just above, which
   only has 2. Without a hover-specific override here, hovering a Current
   Projects card in light mode made the title vanish (white text on the
   card's light hover background). Same fix for dark-foreground, which
   drives this same "needs dark text" state while scrolling past a
   light-background section in dark theme. */
body.theme-light .work-card-link:hover .current-project-title,
body.dark-foreground .work-card-link:hover .current-project-title {
    color: var(--km-text) !important;
}

body.theme-light .log-tag {
    background: rgba(38, 36, 46, 0.08) !important;
    color: var(--km-muted) !important;
}

/* Logs wayfinder — light mode. The tile text color itself is handled
   unconditionally up in the base .log-tile rules now (not theme-scoped);
   only the drawer chrome around the tiles follows the site's cream
   palette here. */
body.theme-light .log-drawer {
    background: var(--km-card-strong) !important;
    border-color: var(--km-border) !important;
    box-shadow: 0 12px 28px rgba(38, 36, 46, 0.08) !important;
}

body.theme-light .drawer-eyebrow { color: var(--km-muted) !important; }
body.theme-light .drawer-head h2 { color: var(--km-text) !important; }

body.theme-light .drawer-close {
    background: var(--km-card) !important;
    border-color: var(--km-border) !important;
    color: var(--km-text) !important;
}
body.theme-light .drawer-close:hover {
    background: var(--km-link) !important;
    border-color: var(--km-link) !important;
    color: #ffffff !important;
}

body.theme-light .breadcrumb li:not(:first-child)::before { color: var(--km-muted) !important; }
body.theme-light .breadcrumb button { color: var(--km-link) !important; }
body.theme-light .breadcrumb li.current { color: var(--km-text) !important; }

body.theme-light .entry-row { color: var(--km-text) !important; border-color: var(--km-border) !important; }
body.theme-light .entry-row:hover { background: var(--km-link-soft, rgba(15, 114, 181, 0.08)) !important; }
body.theme-light .entry-icon { color: var(--km-muted) !important; }
body.theme-light .entry-row.is-folder .entry-icon { color: var(--km-link) !important; }
body.theme-light .entry-title { color: var(--km-text) !important; }
body.theme-light .entry-date { color: var(--km-muted) !important; }
body.theme-light .entry-cue { color: var(--km-link) !important; }
body.theme-light .entry-row[disabled] .entry-cue { color: var(--km-muted) !important; }
body.theme-light .entry-empty { color: var(--km-muted) !important; }

body.theme-light .drawer-close:focus-visible,
body.theme-light .breadcrumb button:focus-visible,
body.theme-light .entry-row:focus-visible {
    outline-color: var(--km-link) !important;
    background: rgba(15, 114, 181, 0.08) !important;
}

body.theme-light .log-tile:focus-visible {
    outline-color: var(--km-link) !important;
}

body.theme-light .log-drawer { --pulse-rgb: 15, 114, 181; }

body.theme-light .resume-button {
    color: var(--km-text) !important;
    background: rgba(255, 255, 255, 0.42) !important;
    border-color: rgba(38, 36, 46, 0.16) !important;
}

body.theme-light .resume-button:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(38, 36, 46, 0.3) !important;
}

body.theme-light .fullscreen-reader {
    background: var(--km-cream) !important;
    color: var(--km-text) !important;
}

body.theme-light .reader-header h1,
body.theme-light .reader-meta,
body.theme-light .reader-body,
body.theme-light .reader-body p,
body.theme-light .reader-body li,
body.theme-light .reader-body h1,
body.theme-light .reader-body h2,
body.theme-light .reader-body h3,
body.theme-light .reader-body h4,
body.theme-light .reader-body span,
body.theme-light .reader-body strong,
body.theme-light .reader-body em,
body.theme-light .reader-body figcaption {
    color: var(--km-text) !important;
}

body.theme-light .back-link {
    background: var(--km-card) !important;
    border-color: var(--km-border) !important;
    color: var(--km-text) !important;
}

body.theme-light .back-link:hover {
    background: var(--km-card-strong) !important;
}

body.theme-light .scroll-top {
    color: var(--km-muted) !important;
}

body.theme-light .scroll-top:hover {
    color: var(--km-text) !important;
}

/* Project card readability */
body.theme-light .section-title-small,
body.dark-foreground .section-title-small {
    color: #26242E !important;
    opacity: 0.88 !important;
}

body.theme-light .current-project-card,
body.theme-light #projects-grid .project-card,
body.dark-foreground .current-project-card,
body.dark-foreground #projects-grid .project-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(38, 36, 46, 0.16) !important;
    box-shadow: 0 12px 28px rgba(38, 36, 46, 0.06) !important;
}

body.theme-light .current-project-card *,
body.theme-light #projects-grid .project-card *,
body.dark-foreground .current-project-card *,
body.dark-foreground #projects-grid .project-card * {
    color: #26242E !important;
    opacity: 1 !important;
}

body.theme-light .current-project-card .project-desc,
body.theme-light #projects-grid .project-card .project-desc,
body.dark-foreground .current-project-card .project-desc,
body.dark-foreground #projects-grid .project-card .project-desc {
    color: rgba(38, 36, 46, 0.78) !important;
}

body.theme-light .work-subtitle,
body.dark-foreground .work-subtitle {
    color: rgba(38, 36, 46, 0.82) !important;
}

body.theme-light .current-project-logo,
body.dark-foreground .current-project-logo {
    background: #182B49 !important;
}

body.theme-light .current-project-logo *,
body.dark-foreground .current-project-logo * {
    color: #ffffff !important;
}

/* Mobile navigation */
/* ============================================= */
/* MOBILE / TABLET LAYOUT (<=1050px)              */
/* Consolidated from several previously-duplicated */
/* @media (max-width: 1050px) blocks.              */
/* ============================================= */
@media (max-width: 1050px) {
    .page-layout {
        margin-left: 0 !important;
    }

    .hamburger-menu {
        display: flex;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(255, 255, 255, 0.95) !important;
        color: #1F1D29 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .hamburger-menu span {
        background: #1F1D29 !important;
    }

    .hamburger-menu:hover,
    .hamburger-menu.active {
        background: #ffffff !important;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width, 160px);
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10000;
        background: color-mix(in srgb, var(--page-bg, #1F1D29) 86%, transparent) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow-y: auto;
        padding: 2rem 1rem;
    }

    .sidebar.active {
        transform: translateX(0);
        background: color-mix(in srgb, var(--page-bg, #1F1D29) 86%, transparent) !important;
        box-shadow: none !important;
    }

    .sidebar-overlay,
    .sidebar-overlay.active {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sidebar-name {
        display: block;
        text-align: center;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 3rem;
    }

    .sidebar-nav .nav-links {
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        margin-bottom: 20px !important;
    }

    .sidebar-nav .nav-link {
        padding: 0.5rem 0 !important;
        font-size: 0.9rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sidebar-section {
        display: block;
        margin-bottom: 2rem;
        color: #fffefe;
        width: 100%;
    }

    .sidebar-section .social-links {
        align-items: center !important;
        width: 100%;
    }

    .sidebar-name h1 {
        font-size: 1.25rem;
    }

    .main-content {
        padding: 5rem 2rem 2rem 2rem;
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .left-content-column {
        max-width: 100% !important;
        width: 100%;
    }

    .work-grid,
    .logs-grid {
        grid-template-columns: 1fr !important;
    }

    .work-image {
        height: 160px;
        font-size: 2.5rem;
    }

    .bio-section {
        /* flex-direction was fought here between column-reverse (this rule)
           and column (the higher-specificity #home .bio-section below) —
           the ID rule always won, making the reverse dead code. Order is
           now handled cleanly by .home-side-column { order: -1 } instead. */
        gap: 2rem;
    }

    body.theme-light .sidebar,
    body.theme-light .sidebar.active {
        background: color-mix(in srgb, var(--page-bg, #F7F1EA) 88%, transparent) !important;
        border-right-color: rgba(38, 36, 46, 0.14) !important;
    }

    body.theme-light .hamburger-menu {
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(38, 36, 46, 0.18) !important;
        color: #26242E !important;
        box-shadow: 0 8px 24px rgba(38, 36, 46, 0.12) !important;
    }

    body.theme-light .hamburger-menu span {
        background: #26242E !important;
    }

    body.theme-light .sidebar,
    body.theme-light .sidebar a,
    body.theme-light .project-link,
    body.theme-light .social-link,
    body.theme-light .typed-name,
    body.theme-light .greeting,
    body.theme-light .typed-flags,
    body.theme-light .pronunciation {
        color: #26242E !important;
    }

    body:not(.theme-light) .sidebar,
    body:not(.theme-light) .sidebar a,
    body:not(.theme-light) .project-link,
    body:not(.theme-light) .social-link,
    body:not(.theme-light) .typed-name,
    body:not(.theme-light) .greeting,
    body:not(.theme-light) .typed-flags,
    body:not(.theme-light) .pronunciation {
        color: #FFFFFF !important;
    }

    html {
        zoom: 1;
    }

    #home .bio-section {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* This used to force .bio-image-container to the top of its own flex
       row with order:-1 and a 7rem top margin — from before it was nested
       inside .home-side-column. That's the real source of the reported
       112px of dead space; superseded by .home-side-column's own layout
       and its order:-1 at <=768px specifically. */

    #home .profile-image-wrapper,
    #home .profile-image-wrapper img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #home .left-content-column {
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    #home .home-videos-row {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #home .home-video-card {
        width: 100% !important;
        max-width: 560px !important;
        flex: 0 1 auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #home .home-video-card iframe {
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #about .experience-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #about .experience-header,
    #education .experience-header,
    #experience .experience-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 1.25rem !important;
        width: 100% !important;
    }

    #about .experience-header-left,
    #education .experience-header-left,
    #experience .experience-header-left {
        width: 100% !important;
        max-width: 900px !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #about .experience-header-right,
    #education .experience-header-right,
    #experience .experience-header-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        gap: 0.75rem !important;
    }

    #about .experience-logo-link,
    #education .experience-logo-link,
    #experience .experience-logo-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #about .experience-logo,
    #education .experience-logo,
    #experience .experience-logo {
        width: clamp(170px, 42vw, 260px) !important;
        height: clamp(105px, 28vw, 180px) !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0.4rem !important;
        background: transparent !important;
        border: none !important;
    }

    #about .experience-logo img,
    #education .experience-logo img,
    #experience .experience-logo img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #about .experience-header-right > img {
        width: 100% !important;
        max-width: 460px !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 12px !important;
    }

    #about .verse-container {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
        max-width: 680px !important;
    }

    #current-projects .current-projects-grid {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    #current-projects .work-card-link {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #current-projects .current-project-card {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #current-projects .current-project-logo {
        width: 100% !important;
        height: clamp(90px, 22vw, 130px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #current-projects .current-project-logo img {
        width: auto !important;
        height: auto !important;
        max-width: 88% !important;
        max-height: 88% !important;
        object-fit: contain !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #goals .experience-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #goals .experience-header-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #goals .experience-header-right > div {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #goals .experience-header-right img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

/* The old "tablet" 1051-1150px sliver used to reverse .bio-section into a
   stacked, profile-card-first layout — a narrow, inconsistent special case
   nothing else in the responsive system matched (768-1050px showed the
   normal order via the #home .bio-section override above; >1150px was
   never reversed either). Removed so 1051-1150px behaves like the rest of
   the >=1051px desktop range: normal side-by-side order, sized by
   .home-side-column/.left-content-column like everywhere else in it. */

/* Medium mobile */
@media (max-width: 900px) {
    .profile-image-wrapper img {
        width: min(220px, 100%);
    }

    .experience-section {
        padding: 2rem 0;
    }

    .experience-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .experience-header-right {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: auto;
    }

    .experience-header-right .experience-date {
        order: 2;
        text-align: right;
    }

    .experience-header-right .experience-logo {
        order: 1;
    }

    .experience-logo {
        width: 80px;
        height: 80px;
    }

    .experience-date {
        align-self: flex-start;
    }
}

/* Small mobile */
@media (max-width: 600px) {
    .hamburger-menu {
        top: 0.75rem;
        left: 0.75rem;
        /* Kept at the 44px touch-target minimum even at this breakpoint —
           small screens are exactly where a tap target should never
           shrink below it. */
        width: 44px;
        height: 44px;
    }

    .sidebar {
        width: 200px !important;
        max-width: 85%;
        padding: 1.5rem 1rem;
    }

    .main-content {
        padding: 4.5rem 1.25rem 2rem 1.25rem;
    }

    #bio-logs-list {
        grid-template-columns: 1fr !important;
    }
}

/* Short desktop screens */
@media (max-height: 720px) and (min-width: 1051px) {
    .sidebar {
        padding: 1.25rem 1rem;
    }

    .sidebar-name h1 {
        font-size: 1.25rem;
    }

    .sidebar-nav .nav-link {
        font-size: 0.9rem;
    }

    .sidebar-nav {
        gap: 1rem;
    }

    .social-links {
        gap: 0.75rem !important;
    }

    .theme-toggle-wrap {
        padding-top: 0.75rem;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* =========================================================
   Fix sidebar text in light mode
   ========================================================= */

body.theme-light .sidebar,
body.theme-light .sidebar *,
body.theme-light .sidebar a,
body.theme-light .sidebar-name,
body.theme-light .sidebar-name h1,
body.theme-light .typed-name,
body.theme-light .greeting,
body.theme-light .typed-flags,
body.theme-light .pronunciation {
    color: #26242E !important;
    opacity: 1 !important;
}

body.theme-light .sidebar svg,
body.theme-light .sidebar .nav-icon,
body.theme-light .sidebar svg * {
    color: #26242E !important;
    stroke: currentColor !important;
}

body.theme-light .sidebar {
    border-right-color: rgba(38, 36, 46, 0.16) !important;
}

body.theme-light .theme-toggle {
    color: #26242E !important;
    border-color: rgba(38, 36, 46, 0.2) !important;
}

/* =========================================================
   FINAL RESPONSIVE POLISH OVERRIDES V4
   Moderate logo sizing. Logo changes only happen when minimized.
   ========================================================= */

/* Desktop zoom only. Do not run this during hamburger layout. */

/* Mobile / minimized layout should not be zoomed. */

/* Force real browser bullets, no custom bullet character. */
.experience-bullets {
    list-style-type: disc !important;
    list-style-position: outside !important;
    padding-left: 1.5rem !important;
    margin-left: 0 !important;
}

.experience-bullets li {
    display: list-item !important;
    position: static !important;
    padding-left: 0.25rem !important;
    margin-bottom: 0.45rem !important;
}

.experience-bullets li::before {
    content: none !important;
    display: none !important;
}

/* Short centered divider between Logs and Contact. */
#contact {
    border-top: none !important;
    position: relative;
}

#contact::before {
    content: "";
    display: block;
    width: min(62vw, 900px);
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 auto 2.5rem auto;
}

body.theme-light #contact::before {
    background: rgba(38, 36, 46, 0.16);
}

/* Center profile section when screen is minimized. */

/* Center videos when screen is minimized. */

/* Moderate logo/image fixes only when screen is minimized. */

/* Center the Goals photo when screen is minimized */

/* --- Tightened Square Layout for Last.fm Card --- */

/* Removed the forced 300px height so the card body dynamically shrinks to fit the square layout */
/* 1. CONTAINERS: FORCE UNIFORM SIZE AND ALIGNMENT */
#home #now-playing.now-playing-card,
.letterboxd-card-inner {
    width: 190px !important;
    max-width: 190px !important;
    height: 100% !important;
    min-height: 300px !important; /* Matches your video card height */
    box-sizing: border-box !important;
    padding: 0.75rem !important; /* Unified padding for a clean look */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
}

/* 1. Force the image to occupy its own "slot" at the top */
#home #now-playing img.now-playing-art,
#home #now-playing .now-playing-art {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; 
    border-radius: 8px !important;
    object-fit: cover !important;   
    display: block !important;
    /* Remove min-height: 0 if it exists; it can cause the image to 'shrink' away */
    min-height: auto !important; 
    flex-shrink: 0 !important; /* This prevents the image from squishing */
}



/* 2. Ensure the parent container is actually creating the space */
#home #now-playing.now-playing-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Forces the card to take up the full 278px */
    justify-content: flex-start !important; 
}

/* 4. TYPOGRAPHY */
#home #now-playing .now-playing-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#home #now-playing .now-playing-artist {
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
}

/* 5. CLEANUP */
#home #now-playing.now-playing-card .now-playing-status {
    display: none !important;
}

#home #now-playing.now-playing-card a {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
@media (max-width: 1100px) {
  .video-letterboxd-row {
    justify-content: center !important;
  }
}

@media (max-width: 780px) {
  .video-letterboxd-row {
    flex-direction: column !important;
    align-items: center !important;
  }

  .home-video-card,
  .letterboxd-card,
  .spotify-card {
    flex: 1 1 100% !important;
    max-width: 520px !important;
    width: 100% !important;
  }
}

/*.now-playing-card {
    width: 100%;
    max-width: 320px;
    margin: 1rem auto 0 auto;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.4;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.now-playing-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.now-playing-art {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
}

.now-playing-text {
    min-width: 0;
    text-align: left;
}

.now-playing-status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
    margin-bottom: 0.35rem;
}

.now-playing-title {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now-playing-artist {
    font-size: 0.8rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now-playing-card a {
    color: inherit;
    text-decoration: none;
}

.now-playing-card a:hover .now-playing-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.theme-light .now-playing-card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(38, 36, 46, 0.16);
    color: #26242E;
    box-shadow: 0 10px 28px rgba(38, 36, 46, 0.12);
}

/* Spotify card light-mode fix: the "Tightened Square Layout" rules above
   use #home #now-playing.now-playing-card with !important, which outranks
   the generic .now-playing-card light rule above, so the card stayed dark
   when switching themes. */
#home #now-playing.now-playing-card {
    transition: background-color var(--bg-fade-duration) ease,
                border-color var(--bg-fade-duration) ease,
                box-shadow var(--bg-fade-duration) ease;
}

#home #now-playing .now-playing-title,
#home #now-playing .now-playing-artist {
    transition: color var(--bg-fade-duration) ease;
}

body.theme-light #home #now-playing.now-playing-card {
    background: var(--km-card) !important;
    border-color: rgba(38, 36, 46, 0.12) !important;
    box-shadow: 0 12px 28px rgba(38, 36, 46, 0.05) !important;
}

body.theme-light #home #now-playing .now-playing-title {
    color: var(--km-text) !important;
}

body.theme-light #home #now-playing .now-playing-artist {
    color: var(--km-muted) !important;
}

/* Smaller Last.fm music widget 
#home .now-playing-card {
    max-width: 280px !important;
    width: 100% !important;
    margin-top: 0.85rem !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 16px !important;
}

#home .now-playing-inner {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.7rem !important;
    width: 100% !important;
}

#home img.now-playing-art,
#home .now-playing-art {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
}

#home .now-playing-text {
    min-width: 0 !important;
    text-align: left !important;
    display: block !important;
}

#home .now-playing-status {
    font-size: 0.62rem !important;
    margin-bottom: 0.35rem !important;
    letter-spacing: 0.1em !important;
}

#home .now-playing-title {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#home .now-playing-artist {
    display: block !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    opacity: 0.72 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
} */

/* Fix fullscreen log reader when desktop zoom is active */
.fullscreen-reader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2147483647 !important;
    overflow-y: auto !important;
}

/* Because html is zoomed to 0.8 on desktop, make the reader 125% wide/tall */
@media (min-width: 1051px) {
    .fullscreen-reader {
        width: 125vw !important;
        height: 125vh !important;
    }
}

/* Hide the normal page behind the log reader */
body:has(.fullscreen-reader) .sidebar,
body:has(.fullscreen-reader) .page-layout {
    visibility: hidden !important;
}

/* Keep the log reader visible */
body:has(.fullscreen-reader) .fullscreen-reader {
    visibility: visible !important;
}

/* Make log reader nicer on smaller screens */
@media (max-width: 700px) {
    .reader-content {
        /* Extra top margin vs desktop's 120px: .reader-toolbar-top (Back +
           translate pills + theme toggle) can itself wrap to 2 lines on a
           narrow phone, stacked above .reader-toolbar-nav (Previous/Next)
           — worst case is 3 lines of controls. Leave enough room that
           never overlaps the header regardless. */
        margin: 180px auto 40px auto !important;
        padding: 0 24px !important;
        max-width: 100% !important;
    }

    .reader-header h1 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .reader-body {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }

    .reader-toolbar {
        top: 20px !important;
        left: 20px !important;
        right: 20px !important;
        gap: 8px !important;
    }

    .reader-toolbar-row {
        gap: 8px;
    }

    .reader-toolbar .back-link {
        padding: 9px 14px;
        font-size: 0.65rem;
        gap: 7px;
    }

    .reader-top-controls {
        gap: 8px !important;
    }
}
/* Mobile Optimization Upgrades */
@media screen and (max-width: 768px) {
    /* 1. Eliminate the desktop sidebar spacing constraint */
    .page-layout {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* 2. Fix the home column wrapping & spacing */
    .bio-section {
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 2rem !important;
    }

    .left-content-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .profile-image-wrapper img {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
    }

    .profile-name {
        font-size: 28px !important; /* Scaled down down from 38px */
    }

    /* 4. Fix Experience & Education multi-row misalignment */
    .experience-header {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: flex-start !important;
    }

    .experience-header-right {
        min-width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .experience-date {
        text-align: left !important;
    }

    .experience-logo {
        width: 140px !important;
        height: auto !important;
        justify-content: flex-start !important;
    }

    .experience-logo img {
        max-width: 140px !important;
    }

    /* 5. Clean up grid systems (Personal Projects & Video Rows) */
    .work-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .home-videos-row {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .home-video-card {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    #bio-logs-list {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}
/* ============================================================
   PHOTO HERO — adaptive gradient overlay + glassmorphism card, for any
   section with a background photo (e.g. a future La Jolla / Torrey Pines
   shot). Nothing on the site uses a photographic background yet, so this
   isn't wired into any section — it's a ready-to-use drop-in. To use it:

     <section class="photo-hero" style="background-image:url('Assets/la-jolla.jpg')">
       <div class="photo-hero__overlay">
         <div class="glass-card">
           <h2>Your heading</h2>
           <p>Your copy.</p>
         </div>
       </div>
     </section>

   The overlay is deliberately heavy (78–94% opaque) so contrast holds
   regardless of what's actually in the photo — dark mode gets a near-black
   scrim under white text, light mode a bright frosted scrim under dark
   text, both re-verified >=7:1 against worst-case photo content, not just
   against an empty background. Both follow the site's existing
   body.theme-light toggle and its --bg-fade-duration crossfade automatically.
   ============================================================ */
.photo-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    overflow: hidden;
}

.photo-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 5vw, 64px);
    background: linear-gradient(180deg, rgba(18, 18, 24, 0.78), rgba(18, 18, 24, 0.92));
    transition: background var(--bg-fade-duration) ease;
}

body.theme-light .photo-hero__overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 247, 250, 0.94));
}

.glass-card {
    position: relative;
    width: 100%;
    max-width: 640px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    padding: clamp(20px, 4vw, 36px);
    color: #ffffff;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
    transition: background-color var(--bg-fade-duration) ease,
                border-color var(--bg-fade-duration) ease,
                color var(--bg-fade-duration) ease;
}

body.theme-light .glass-card {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(38, 36, 46, 0.14);
    color: var(--km-text);
    box-shadow: 0 20px 44px rgba(38, 36, 46, 0.12);
}

/* backdrop-filter is unsupported on very old browsers — fall back to a
   fully opaque card so text never sits directly on an un-scrimmed photo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-card { background: rgba(20, 20, 26, 0.94); }
    body.theme-light .glass-card { background: rgba(255, 255, 255, 0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .photo-hero__overlay, .glass-card { transition: none !important; }
}

/* ============================================================
   MESSAGE SECTION — personal manifesto quote between Home and About.
   ============================================================ */
.manifesto-quote {
    margin: 0 auto;
    max-width: 780px;
    text-align: center;
    border: none;
    padding: 0;
}

.manifesto-mark {
    display: block;
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
    margin-bottom: 0.25rem;
    color: rgba(255, 255, 255, 0.28);
}

.manifesto-line {
    font-family: 'IBM Plex Sans', sans-serif;
    line-height: 1.55;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.95);
}

.manifesto-line:last-child { margin-bottom: 0; }

.manifesto-line--lead {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.manifesto-line--close {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: balance;
}

body.theme-light .manifesto-mark { color: rgba(38, 36, 46, 0.22) !important; }
body.theme-light .manifesto-line { color: var(--km-text) !important; }
body.theme-light .manifesto-line--close { color: var(--km-muted) !important; }


/* ============================================================
   HIGHLIGHTS STRIP — small horizontal-scroll strip in the Current
   section, same format as the certifications strip below (.cert-grid/
   .cert-card): native momentum scroll + snap points, no dots/arrows/
   autoplay, just a wheel-to-horizontal assist via initHorizontalScroll()
   in script.js. Rotates a few highlights (travel photo, lab photos once
   uploaded, the linked paper).
   ============================================================ */
.highlights-strip {
    display: flex;
    gap: 0.9rem;
    max-width: min(720px, 100%);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.6rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.highlights-strip::-webkit-scrollbar { height: 6px; }
.highlights-strip::-webkit-scrollbar-track { background: transparent; }
.highlights-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 10px; }
.highlights-strip::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

.highlights-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease, border-color 0.3s ease;
}

.highlights-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.highlights-card:active { transform: scale(0.988); }

.highlights-card:focus-visible {
    outline: 2px solid #EE964B;
    outline-offset: 2px;
}

.highlights-media {
    width: 100%;
    height: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.highlights-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.highlights-card--placeholder .highlights-media,
.highlights-card--doc .highlights-media {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 10px, rgba(255, 255, 255, 0.02) 10px 20px);
}

.highlights-card--placeholder .highlights-media {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.highlights-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.highlights-caption {
    padding: 0.65rem 0.75rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fffeff;
    line-height: 1.35;
}

.highlights-card--placeholder .highlights-caption,
.highlights-card--doc .highlights-caption {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

body.theme-light .highlights-strip {
    scrollbar-color: rgba(38, 36, 46, 0.3) transparent !important;
}
body.theme-light .highlights-strip::-webkit-scrollbar-thumb {
    background: rgba(38, 36, 46, 0.3) !important;
}

body.theme-light .highlights-card {
    background: var(--km-card) !important;
    border-color: rgba(38, 36, 46, 0.12) !important;
}

body.theme-light .highlights-card:hover {
    background: var(--km-card-strong) !important;
    border-color: rgba(38, 36, 46, 0.22) !important;
}

body.theme-light .highlights-card--placeholder .highlights-media {
    border-color: rgba(38, 36, 46, 0.2) !important;
}

body.theme-light .highlights-icon {
    background: rgba(38, 36, 46, 0.08) !important;
    color: var(--km-muted) !important;
}

body.theme-light .highlights-caption { color: var(--km-text) !important; }
body.theme-light .highlights-card--placeholder .highlights-caption,
body.theme-light .highlights-card--doc .highlights-caption {
    color: var(--km-muted) !important;
}

/* ============================================================
   SITE TRANSLATOR — Google's free client-side "Website Translator"
   widget (no API key/server). Google injects a top banner iframe and
   shoves the whole page down when a translation is active; both are
   suppressed below so it behaves like a normal in-page control instead.
   ============================================================ */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.translate-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 0.75rem;
}

.translate-quick {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.translate-quick-btn {
    font: inherit;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 14px;
    min-height: 40px;
    cursor: pointer;
    /* touch-action skips the ~300ms tap-delay iOS Safari otherwise waits
       out to check for a double-tap-to-zoom; tap-highlight-color drops the
       gray flash Safari paints on tap so it doesn't fight this button's
       own :hover/:active styling. Neither is the fix for taps not
       registering (this is already a real <button>) — just iOS polish. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.translate-quick-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.translate-quick-btn:focus-visible {
    outline: 2px solid #EE964B;
    outline-offset: 2px;
}

body.theme-light .translate-quick-btn {
    background: var(--km-card) !important;
    border-color: var(--km-border) !important;
    color: var(--km-text) !important;
}

body.theme-light .translate-quick-btn:hover {
    background: var(--km-card-strong) !important;
}

/* Heads-up banner shown (in-language) only once a curated translation is
   active — see showTranslationNotice() in script.js. */
.translate-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 1520px;
    /* Extra top clearance so this never sits flush against a browser's own
       translate bar (Chrome/Safari's native banner) — it's already in
       normal document flow (no position: fixed/absolute here), this is
       just breathing room. */
    margin: 2.75rem auto 1.5rem;
    padding: 12px clamp(20px, 4vw, 40px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.translate-notice p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
}

.translate-notice-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.translate-notice-close:hover { color: #fff; }
.translate-notice-close:focus-visible { outline: 2px solid #EE964B; outline-offset: 2px; }

body.theme-light .translate-notice {
    background: var(--km-card) !important;
    border-color: var(--km-border) !important;
}
body.theme-light .translate-notice p { color: var(--km-text) !important; }
body.theme-light .translate-notice-close { color: var(--km-muted) !important; }
body.theme-light .translate-notice-close:hover { color: var(--km-text) !important; }

/* ============================================================
   HOME RIGHT COLUMN — the timestamp/theme/translate controls and the
   profile card now share one flex column (.home-side-column) instead of
   the controls floating position:absolute over an independently-laid-out
   card below. That's what was causing the misalignment on wide screens:
   two different positioning systems (absolute-from-viewport vs
   flex-content-relative) trying to occupy the same visual column.
   Both this column and .left-content-column sit in the same
   .bio-section flex row (align-items: flex-start, flex-wrap: wrap), so
   they already share one top edge and collapse to a single column
   together at whatever width they stop fitting side-by-side — no extra
   breakpoint needed, and no separate one to keep in sync with it.
   ============================================================ */
.home-side-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 340px;
    flex: 0 0 340px;
    height: fit-content; /* never let an ancestor's own height stretch/clip this column */
    padding-top: 24px;
}

/* #home carries .content-section's `contain: layout style paint` (see the
   base rule) for render-performance isolation. `contain: paint` clips
   anything that overflows the section's own box regardless of
   `overflow: visible` — the two are independent. That's a real risk for
   Home specifically now that its right column (controls + profile card +
   map) is tall enough to occasionally exceed the section's computed
   height, so paint containment is dropped here; layout/style containment
   (the parts that don't clip) stay for the performance benefit. */
#home {
    contain: layout style;
}

@media (max-width: 1050px) {
    /* Profile photo/name/title first, bio text and logs below — the
       whole right column (it carries the header controls too) moves as
       one unit rather than splitting it from the profile card. Matches
       the #home .bio-section breakpoint (also max-width: 1050px) that
       actually stacks the two columns into one, so the timestamp,
       translate pills, and headshot show up first as soon as the layout
       stacks at all instead of only below 768px, which used to leave a
       769-1050px gap where bio text/logs still rendered first. */
    .home-side-column { order: -1; }
}

.home-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
}

.home-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Compact horizontal variant of .translate-wrap for sitting beside the
   theme toggle instead of stacked in the sidebar. Only the three pill
   buttons are shown here — Google's own dropdown is fully capable and
   still does the actual translating, it's just redundant next to the
   pills as a second, uglier way to pick the same two languages. */
.translate-wrap--home {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    width: auto;
}

.translate-wrap--home .translate-label { display: none; }
.translate-wrap--home .translate-quick { margin-bottom: 0; gap: 8px; }

/* Deliberately NOT display:none. Google's widget script attaches to this
   div and measures/lays out its own injected markup inside it — a
   display:none container is removed from the render tree entirely, and
   an unmeasurable container is a plausible reason the widget's actual
   translate-apply could fail unpredictably (index.html is the one page
   this div was ever display:none on; logs.html's sidebar keeps its
   equivalent visibly rendered and hasn't shown this problem). Kept in
   the render tree and fully measurable, just visually/interactively
   invisible and out of flow so it doesn't affect the pill buttons'
   layout — the standard "visually-hidden but still real" pattern. */
.translate-wrap--home #google_translate_element {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Same compact horizontal variant, for the log reader's top-of-page
   control group (see .reader-top-controls). The reader never renders its
   own #google_translate_element — the page underneath (logs.html's
   sidebar) already has one and that's all the widget needs to attach to;
   these pills just set the googtrans cookie and reload. */
.translate-wrap--reader {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    width: auto;
}

.translate-wrap--reader .translate-quick { margin-bottom: 0; gap: 8px; }

@media (max-width: 700px) {
    /* Pills alone can outgrow the phone-width top bar next to the theme
       toggle — shrink them to match .reader-toolbar .back-link at this
       breakpoint instead of wrapping onto their own row. */
    .translate-wrap--reader .translate-quick-btn {
        padding: 8px 11px;
        font-size: 0.65rem;
        min-height: 36px;
    }

    .tts-rate-btn {
        padding: 8px 10px;
        font-size: 0.65rem;
        min-height: 36px;
        min-width: 36px;
    }
}

@media (max-width: 1050px) {
    /* Matches .left-content-column's own full-width breakpoint (set in the
       >=1051px block above and again at <=1050px) — these two used to be
       out of sync (this was 900px), which is exactly what squeezed the
       right column into a leftover 340px sliver anywhere from 900-1050px
       while the left column had already gone full-width. */
    .home-side-column {
        max-width: 100%;
        flex-basis: 100%;
        padding-top: 0;
    }

    .home-controls-row { justify-content: flex-start; }
}

@media (max-width: 1050px) {
    /* Compact single-row header bar: timestamp + toggle + language pills
       all inline together, so the block that now sits above the hero
       (via .home-side-column's order: -1, also flipped at 1050px) stays
       short instead of using two stacked rows worth of vertical space. */
    .home-controls {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
    }

    #timestamp {
        font-size: 0.75rem !important;
        text-align: left !important;
    }
}

.translate-label {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* Google renders its own markup/classes inside #google_translate_element
   once the widget loads — style it to sit quietly in the sidebar rather
   than looking like a bolted-on third-party badge. */
#google_translate_element .goog-te-gadget {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

#google_translate_element .goog-te-gadget-simple {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center;
    cursor: pointer;
}

#google_translate_element .goog-te-gadget-simple:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

#google_translate_element .goog-te-gadget-icon { display: none !important; }

#google_translate_element .goog-te-menu-value,
#google_translate_element .goog-te-menu-value span {
    color: #ffffff !important;
    font-size: 0.78rem !important;
}

body.theme-light .translate-label { color: var(--km-muted) !important; }

body.theme-light #google_translate_element .goog-te-gadget { color: var(--km-muted) !important; }

body.theme-light #google_translate_element .goog-te-gadget-simple {
    background: var(--km-card) !important;
    border-color: var(--km-border) !important;
}

body.theme-light #google_translate_element .goog-te-gadget-simple:hover {
    background: var(--km-card-strong) !important;
}

body.theme-light #google_translate_element .goog-te-menu-value,
body.theme-light #google_translate_element .goog-te-menu-value span {
    color: var(--km-text) !important;
}