:root{
    /* Final palette variables (user-specified) */
    --blush-pink: #E6BABA;      /* Girly accent */
    --periwinkle: #799CC9;      /* Tech/Pro primary */
    --blush-white: #F9F4F4;     /* Neutral background */
    --charcoal: #343A40;        /* Dark neutral (body text) */
    --espresso: #4E423D;        /* Dark neutral for header text / logo */
    --soft-peach: #F2AFA0;      /* Warm accent (CTA) */
    --pink-gold: #E5C4C0;       /* Aesthetic accent */
    --muted-muted: #6c6c6c;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--blush-white);
    color: var(--charcoal);
}

/* Strong overrides to ensure the site uses the selected Blush palette (helps against caching or other CSS collisions) */
.html, body { background-color: var(--blush-white) !important; }
.header { background: var(--blush-pink) !important; color: var(--charcoal) !important; }
nav a { color: var(--charcoal) !important; }
/* Primary buttons now use Periwinkle to better match the glass palette */
.btn { background: var(--periwinkle) !important; color: #ffffff !important; }
.btn.ghost { background: transparent !important; color: var(--periwinkle) !important; border-color: rgba(0,0,0,0.06) !important; }
.btn.small { background: var(--periwinkle) !important; color: #ffffff !important; }
footer { background: var(--blush-white) !important; color: var(--charcoal) !important; }

header {
    background: var(--blush-pink);
    color: var(--charcoal);
    padding: 20px 0;
    /* header layout adjusted for nav */
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}

/* Contact/action buttons (single-line row for presentation slide) */
.contact-actions { display: flex; flex-direction: row; gap: 40px; align-items: center; justify-content: center; margin-top: 12px; white-space: nowrap; overflow-x: auto; }

.contact-label { font-weight: 700; color: var(--periwinkle); margin-right: 20px; font-size: 0.98rem; }

/* Extra breathing room: larger gap on desktop, reduced on very small screens so it still fits */
@media (max-width: 420px) {
    .contact-actions { gap: 20px; }
    .contact-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
}

/* Floating contact block on the right (desktop) */
#floating-contact{
    position: fixed;
    right: 22px;
    bottom: 22px;
    top: auto;
    transform: none;
    background: rgba(249,244,244,0.95);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(229,196,192,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 130;
}

#floating-contact .floating-contact-label { color: var(--periwinkle); font-weight:700; font-size:0.95rem; margin:0; }
#floating-contact .floating-contact-actions { display:flex; flex-direction:column; gap:12px; }
#floating-contact .contact-btn { width:44px; height:44px; min-width:44px; min-height:44px; padding:8px; }

/* Hide on small screens to avoid covering content */
@media (max-width: 900px) {
    /* On small screens show a compact bottom-centered pill instead of hiding it */
    #floating-contact {
        display: flex;
        top: auto;
        bottom: 14px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row; /* horizontal pill */
        padding: 8px 12px;
        gap: 12px;
        align-items: center;
        border-radius: 999px;
        width: auto;
        box-shadow: 0 10px 24px rgba(0,0,0,0.08);
        z-index: 140;
    }
    #floating-contact .floating-contact-label { display: none; }
    #floating-contact .floating-contact-actions { flex-direction: row; gap: 12px; }
    #floating-contact .contact-btn { width: 44px; height: 44px; min-width:44px; min-height:44px; }
}

/* Icon-only contact buttons: small circular clickable icons */
.contact-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--blush-pink); background: transparent; box-shadow: 0 6px 14px rgba(11,11,16,0.06); border: 1px solid rgba(229,196,192,0.6); flex: 0 0 auto; }
.contact-btn.ghost { background: transparent; color: var(--blush-pink); border: 1px solid rgba(229,196,192,0.6); box-shadow: none; }
.contact-btn svg { width: 18px !important; height: 18px !important; display: inline-block; vertical-align: middle; color: var(--blush-pink); }
.contact-btn:focus { outline: 3px solid color-mix(in srgb, var(--periwinkle) 40%, black); outline-offset: 2px; }

/* Small visually-hidden text for screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

header h1 {
    margin: 0;
}

/* Small logo variant: make header logo compact for a cleaner top bar */
.logo {
    font-size: 0.95rem; /* very small */
    font-weight: 700;
    letter-spacing: 0.4px;
    margin: 0;
}

@media (max-width: 700px) {
    .logo { font-size: 0.9rem; }
}

nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
/* Navigation text uses Charcoal for clarity; hover/active uses Periwinkle */
nav a { color: var(--charcoal); text-decoration: none; }
nav a:hover, nav a:focus, nav a.active { color: var(--periwinkle); text-decoration: underline; }

.container { width: 90%; max-width: 1000px; margin: 0 auto; }

section {
    padding: 20px;
    /* use blush-white for main content blocks so the whole site reads as a warm background */
    background: var(--blush-white);
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
}

.hero { background: linear-gradient(135deg, var(--blush-pink) 0%, var(--pink-gold) 100%); color: var(--charcoal); padding: 60px 0; }
.hero .lead { max-width: 60ch; }
/* Primary .btn uses periwinkle for better glass contrast */
.btn { display: inline-block; background: var(--periwinkle); color: #ffffff; padding: 10px 16px; border-radius: 6px; text-decoration: none; margin-right: 10px; }
.btn.ghost { background: transparent; color: var(--periwinkle); border: 1px solid rgba(0,0,0,0.06); }

/* Presentation actions: align contact row and CTAs on same line */
.presentation-actions { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.presentation-actions .cta-actions { display: flex; gap: 12px; align-items: center; }

@media (max-width: 700px) {
    .presentation-actions { flex-direction: column; align-items: stretch; }
    .presentation-actions .cta-actions { justify-content: flex-start; }
}

/* Put contact row to the right of CTAs when there's space */
.presentation-actions .contact-actions { margin-left: auto; }

/* Floating contact hide state while presentation is visible */
#floating-contact.hidden-by-presentation { opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none; visibility: hidden; }
#floating-contact { transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; }

.skills { display: flex; gap: 10px; flex-wrap: wrap; }
.skills li { background: var(--blush-pink); color: var(--charcoal); padding:6px 10px; border-radius:6px; }

.projects-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.project { background: var(--blush-white); padding: 14px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.04); display: flex; flex-direction: column; }
.project h3 { margin-top: 0; }

.project .affiliation { font-size: 0.9rem; color: var(--muted-muted); margin-top: 0; }
.tag {
    display: inline-block;
    /* frosted glass chip with a warm pink-gold tint */
    background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(229,196,192,0.14));
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.22);
    color: var(--espresso);
    padding: 6px 10px;
    border-radius: 999px;
    margin-right: 8px;
    font-size: 0.85rem;
    box-shadow: 0 6px 14px rgba(11,11,16,0.04);
    transition: background 220ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* Hover & focus: more glassy (increase tint + lift + stronger shadow) */
.tag:hover, .tag:focus, .tag:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(229,196,192,0.30));
    border-color: rgba(255,255,255,0.38);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(11,11,16,0.10);
    color: var(--espresso);
}

/* Ensure keyboard users see a distinct focus ring without removing the glass effect */
.tag:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--periwinkle) 36%, white);
    outline-offset: 3px;
}
.tags { margin-top:8px; }
.notes { font-style: italic; color: var(--charcoal); }
.btn.small { padding:6px 10px; font-size:0.9rem; border-radius:6px; }

.project-thumb { width: 100%; max-height: 160px; object-fit: cover; border-radius:6px; display:block; margin-bottom: 10px; }

/* Align action buttons (Read more / Repository) to the bottom-right of the project card */
.project-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; width: 100%; }
.project-actions .btn { margin: 0; }
/* When both Repo + Read more exist, place them at opposite ends of the card */
.project-actions.two { justify-content: space-between; }
/* Single-button cards keep actions on the right */
.project-actions.single { justify-content: flex-end; }

/* Experience role layout: left meta column, right stacked content (title + description).
   Using flex with a small gap so the right column's stacked content isn't pushed down by 2-line meta. */
.role {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.role .meta {
    flex: 0 0 200px;
    color: var(--muted-muted);
    font-size: 0.95rem;
    line-height: 1.3;
}
.role .content {
    flex: 1 1 auto;
}
.role h3 { margin: 0 0 2px 0; }
.role .content > p { margin: 2px 0 6px 0; }

@media (max-width: 700px) {
    .role { flex-direction: column; gap: 8px; }
    .role .meta { flex-basis: auto; }
}

/* Single-page slides */
.slide { height: 100vh; padding: 48px 0; display: flex; align-items: center; }
.slide .container { max-width: 1000px; overflow-y: auto; max-height: calc(100vh - 96px); padding-right: 8px; }

/* scroll snap: make each slide fill viewport and snap into place */
main#slides {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
/* make space for a fixed header when it's visible, and ensure scrollIntoView respects it */
main#slides { scroll-padding-top: 84px; }

/* fixed header that hides/shows smoothly */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-120%);
    transition: transform 220ms ease, box-shadow 220ms ease;
    z-index: 80;
}
header.visible {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.slide { scroll-snap-align: start; }
.hero-thumb { width: 100%; max-width: 560px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

/* Project page TOC (left) and prev/next arrows */
@media (min-width: 900px) {
    .project-toc { position: fixed; left: 18px; top: 120px; width: 240px; padding: 8px; z-index: 120; }
    .project-toc { box-sizing: border-box; }
    .project-toc h3 { margin: 0 0 8px 0; color: var(--periwinkle); font-size: 1rem; }
    .project-toc ul { list-style: none; margin: 0; padding: 0; display: block; }
    /* Use a compact, readable list: one project per line, full title visible (no numbering, no em-dash display) */
    .project-toc { font-size: 0.95rem; }
    .project-toc li { margin-bottom: 10px; display: block; width: 100%; }
    .project-toc a { color: var(--charcoal); text-decoration: none; display: block; padding: 6px 8px; border-radius: 6px; width: 100%; box-sizing: border-box; }
    .project-toc a:hover { color: white; background: var(--periwinkle); text-decoration: none; }
    /* ensure full title flows onto multiple lines if needed */
    .project-toc a { white-space: normal; }
    .project-toc li.active a { background: var(--periwinkle); color: white; }

    .project-hero { margin-left: 280px; padding-bottom: 88px; position: relative; }

    /* Place project prev/next arrows at the bottom of the viewport on wide screens.
       This avoids overlap with the hero text and keeps controls accessible. */
    .proj-nav {
        position: fixed;
        bottom: 22px;
        top: auto;
        transform: none;
        width: 46px;
        height: 46px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--blush-white);
        border: 1px solid rgba(229,196,192,0.6);
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        z-index: 130;
    }
     /* Keep both arrows fixed to the viewport bottom so they don't move when the content scrolls.
         Offset the left arrow to sit just inside the main content area (to the right of the TOC). */
    /* offset left arrow further right so it doesn't overlap the hero text */
    /* move left arrow slightly more to the left (close to TOC edge without overlapping) */
    .proj-nav.left { position: fixed; left: 266px; bottom: 22px; }
    /* on very wide screens, nudge it a bit but not too far right */
    @media (min-width: 1400px) {
        .proj-nav.left { left: 300px; }
    }
     /* Keep the right arrow fixed to the viewport */
    /* move the right arrow a bit left so it's not flush with the viewport edge */
    .proj-nav.right { position: fixed; right: 120px; bottom: 22px; }
}

@media (max-width: 900px) {
    .project-toc { display: none; }
    /* On small screens show fixed arrows at the top corners and add side margins to project pages */
    .proj-nav { display: flex; }
    .project-hero { margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 12px; }
    /* small-screen arrow positioning: fixed at top on each side, slightly smaller */
    .proj-nav {
        position: fixed !important;
        top: 12px;
        bottom: auto;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 260;
    }
    .proj-nav.left { left: 12px; }
    .proj-nav.right { right: 12px; }
    .proj-nav svg { width: 18px; height: 18px; }
}

/* Make floating contact smaller on narrow screens (compact pill) */
@media (max-width: 520px) {
    #floating-contact {
        bottom: 8px; /* pull it a bit closer to avoid overlapping nav gestures */
        padding: 4px 6px; /* tighter pill */
        gap: 6px;
        box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    }
    /* smaller circular icons to reduce footprint on narrow phones */
    #floating-contact .contact-btn { width: 32px; height: 32px; min-width:32px; min-height:32px; padding:4px; }
    /* make SVG icons a touch smaller so they fit neatly */
    #floating-contact .contact-btn svg { width: 14px !important; height: 14px !important; }
}

/* Extra-small screens (very compact) */
@media (max-width: 380px) {
    #floating-contact {
        bottom: 6px;
        padding: 4px 6px;
        gap: 5px;
    }
    /* tiniest touch targets while preserving accessibility — keep >=28px */
    #floating-contact .contact-btn { width: 28px; height: 28px; min-width:28px; min-height:28px; padding:3px; }
    #floating-contact .contact-btn svg { width: 12px !important; height: 12px !important; }
}

/* small responsive tweaks */
@media (max-width:700px) {
    .slide { padding: 28px 0; }
    .hero-thumb { max-height: 220px; }
}

/* Hide the header entirely on small screens to maximize content space */
@media (max-width: 700px) {
    header { display: none !important; }
    /* remove the scroll-padding set for fixed header so slides snap to true top */
    main#slides { scroll-padding-top: 0 !important; }
}

/* Slightly larger header text for desktop users */
@media (min-width: 900px) {
    .logo { font-size: 1.2rem; }
}

/* small swipe hint for mobile/trackpad users */
.swipe-hint {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    background: rgba(121,156,201,0.12); /* soft periwinkle background for hint */
    color: var(--periwinkle);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 60;
    display: inline-block;
}

@media (min-width: 1200px) {
    .swipe-hint { display: inline-block; }
}
@media (max-width: 1199px) {
    .swipe-hint { display: inline-block; }
}

footer { margin-top: 40px; }

footer {
    text-align: center;
    padding: 10px 0;
    background: var(--blush-white);
    color: var(--charcoal);
    position: relative;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.04);
}

/* Removed old force rules. Palette overrides are handled in palette-overrides.css. */

form {
    display: flex;
    flex-direction: column;
}

form input, form textarea {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 5px;
    background: #fff;
}

form button {
    background: var(--periwinkle);
    color: #ffffff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

form button:hover {
    background: #6787b0; /* subtle darker periwinkle */
}

/* Headings and link colors per guide */
h1, h2 { color: var(--periwinkle); }
h3, h4 { color: var(--blush-pink); }
a { color: var(--periwinkle); }

/* Role title links: keep the same visual styling but make clickable */
.role .content h3 a { color: inherit; text-decoration: none; cursor: pointer; }
.role .content h3 a:hover { color: var(--periwinkle); text-decoration: underline; }

/* Blockquote styling */
blockquote { background: var(--blush-pink); padding: 12px 16px; border-left: 4px solid var(--pink-gold); color: var(--charcoal); border-radius: 4px; }

/* Divider / icon accent */
.divider { height:1px; background: var(--pink-gold); border: none; margin: 18px 0; }

/* Brand overrides: header, tags, links, CTA hover — placed at end so they override earlier rules */
:root{
    /* Ensure core palette variables are present (authoritative) */
    --blush-pink: #E6BABA;
    --periwinkle: #799CC9;
    --blush-white: #F9F4F4;
    --charcoal: #343A40;
    --espresso: #4E423D;
    --soft-peach: #F2AFA0;
    --pink-gold: #E5C4C0;
}

/* 1) Header text and nav colors */
header { background: var(--blush-pink) !important; }
.logo, .header-logo, header nav a, .site-header .logo { color: var(--espresso) !important; }
.site-header .logo { color: var(--espresso) !important; }
.site-header nav a:hover, .site-header nav a:focus, .site-header nav a.active { color: var(--periwinkle) !important; }

/* 2) Project tag text colour — unified Espresso */
.tag, .project-tag, .project .tag, .projects-grid .tag { color: var(--espresso) !important; }

/* 3) Differentiate Read More vs Repository links inside project cards
   - make them look like accessible action buttons so they read well on pale backgrounds */

.read-more-link, a.read-more-link, .project-actions.two a:last-child {
    display: inline-block;
    /* Read More: warm pink-gold glass chip distinct from the repo button */
    background: rgba(229,196,192,0.28); /* pink-gold glass */
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    color: var(--espresso) !important;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(11,11,16,0.05);
    border: 1px solid rgba(255,255,255,0.18);
}
.read-more-link:hover, .read-more-link:focus, .project-actions.two a:last-child:hover {
    background: rgba(229,196,192,0.44);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11,11,16,0.08);
}


.repo-link, a.repo-link, .project-actions.two a:first-child {
    display: inline-block;
    /* Repository: subtle periwinkle glass (more transparent) to be visually lighter
       Use !important to override the generic .btn rules applied earlier in the file */
    background: rgba(121,156,201,0.22) !important; /* slightly more transparent */
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    color: #ffffff !important;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.repo-link:hover, .repo-link:focus, .project-actions.two a:first-child:hover {
    background: rgba(121,156,201,0.40) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11,11,16,0.08) !important;
}

.cta-button, .btn.cta-button, .btn.primary, .btn {
    /* Primary CTA uses Periwinkle */
    background-color: var(--periwinkle);
    color: #ffffff;
    transition: background-color 160ms ease, transform 120ms ease;
}
.cta-button:hover, .btn.cta-button:hover, .btn.primary:hover, .btn:hover {
    background-color: #6787b0; /* darker periwinkle hover */
    transform: translateY(-1px);
}

/* focus ring for accessibility */
.cta-button:focus, .btn:focus {
    outline: 3px solid rgba(121,156,201,0.22); /* soft periwinkle focus ring */
    outline-offset: 2px;
}

/* ==========================
   Glassmorphism redesign
   - Vibrant background gradient
   - Frosted glass header, cards, and buttons
   - Opaque, high-contrast text
   ========================== */

/* 1) Main page background gradient */
body {
    background: linear-gradient(120deg, var(--periwinkle) 0%, var(--blush-pink) 50%, var(--soft-peach) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    /* keep default body text color for readability */
    color: var(--charcoal);
}

/* 2) Glass header */
header, .header {
    background: rgba(230,186,186,0.25); /* 25% transparent Blush Pink */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.05);
    position: sticky; /* use sticky so header floats over gradient */
    top: 0;
    width: 100%;
    z-index: 110; /* above other content */
}

/* Header text should be fully opaque for legibility */
header .logo, header .site-header .logo, .header-logo, header nav a {
    color: var(--espresso) !important; /* Espresso */
    opacity: 1 !important;
}
header nav a:hover { color: var(--periwinkle) !important; }

/* 3) Glass content cards & main sections
   Apply to common section/card selectors so existing HTML gains frosted panels */
.content-card, .main-section, section, .project {
    background: rgba(255,255,255,0.35); /* 35% transparent white */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.05);
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Keep small utility containers (like .container) intact but ensure inner content contrasts well */
.content-card p, .content-card li, section p, .project p {
    color: var(--charcoal);
}
.content-card h1, .content-card h2, section h1, section h2, .project h3 {
    color: var(--periwinkle);
}

/* Reduce heavy backgrounds inside very small UI regions (thumbnails, etc.) */
.project-thumb { background: rgba(255,255,255,0.06); }

/* 4) Glass buttons (CTAs)
   Primary CTAs use a Periwinkle glass tint so they match the overall palette.
   Read-more and repo links keep their previously defined identities above. */
.cta-button, .btn.cta-button, .btn {
    background: rgba(121,156,201,0.35); /* 35% transparent Periwinkle */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    color: #ffffff !important; /* white text on periwinkle CTAs */
    padding: 10px 16px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease, transform 120ms ease, box-shadow 120ms ease;
}

.cta-button:hover, .btn:hover {
    background: rgba(121,156,201,0.5); /* 50% transparent Periwinkle */
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

/* If specific project link buttons used (repo/readmore), keep their visual identity but maintain glass effect */
/* Removed empty placeholder rules for read-more/repo — explicit styles are defined earlier. */

/* Contact buttons (glass-friendly): make icons visible over the gradient */
.contact-btn {
    /* semi-opaque white glass so icons remain legible on the gradient */
    background: rgba(255,255,255,0.28) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    color: var(--espresso) !important;
    border: 1px solid rgba(255,255,255,0.36) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
}
.contact-btn svg { color: currentColor !important; fill: currentColor !important; stroke: currentColor !important; }
.contact-btn:hover, #floating-contact .contact-btn:hover {
    /* avoid translate/position shifts which can be clipped by overflow; use scale and shadow instead */
    background: rgba(255,255,255,0.40) !important;
    transform: scale(1.04);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12) !important;
}

/* Ensure contact areas don't clip the icon buttons when they animate */
.contact-actions, .presentation-actions, #floating-contact { overflow: visible !important; }

/* Style the floating contact block to match glassmorphism */
#floating-contact{
    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.36);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    color: var(--espresso);
    z-index: 200;
}


/* Accessibility: strong opaque headings in cards and site */
h1, h2, h3, h4, h5 { color: var(--espresso); font-weight: 700; }

/* Keep slide snap behaviour intact but make sure top spacing accounts for sticky header
   (if header is hidden via responsive rules, earlier rule resets scroll-padding-top) */
main#slides { scroll-padding-top: 84px; }

/* Small screens: keep header hidden per your earlier request (this preserves vertical space) */
@media (max-width:700px) {
    header { display: none !important; }
    main#slides { scroll-padding-top: 0 !important; }
    /* reduce blur strength on small devices for performance */
    .content-card, .main-section, section, .project { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
}

/* Project navigation arrows (glassmorphism) */
.proj-nav {
    /* frosted glass button */
    background: rgba(255,255,255,0.32);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 10px 24px rgba(11,11,16,0.08);
    color: var(--espresso);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
    z-index: 220;
}
.proj-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.proj-nav:hover {
    background: rgba(255,255,255,0.5);
    transform: scale(1.06);
    box-shadow: 0 14px 34px rgba(11,11,16,0.12);
}

/* Ensure left/right positions remain but use the glass style above (overrides earlier visual rules) */
.proj-nav.left { left: auto; }
.proj-nav.right { right: auto; }

@media (min-width: 900px) {
    /* keep the positioning offsets that were previously calculated or set by JS */
    .proj-nav.left { left: 266px; position: fixed; bottom: 22px; }
    @media (min-width: 1400px) {
        .proj-nav.left { left: 300px; }
    }
    .proj-nav.right { right: 120px; position: fixed; bottom: 22px; }
}