/* --- NEW MODERN PURPLE THEME --- */

:root {
    /* Palette: Deep Purples & Electric Yellow */
    --ink: #D2D2E6;       /* General text colour */
    --link: #F5C042;      /* Main link colour */
    --visited: #3c096c;   /* Dark Purple (visited links) */
    --highlight: #F5C042; /* Highlight / underline / hover bg */
	--text-highlight: #5A1EF0;   /* Purple text-selection background */
	--text-highlight-ink: #FFFFFF; /* Text colour when selected */

    /* Background Gradient */
    --bg-top: #48336C;    
    --bg-bottom: #2E2046; 
    
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: "Georgia", serif; 
}

/* OVERSCROLL FIX: This paints the background behind the body */
html {
    background-color: var(--bg-top); /* 48336C behind the gradient for overscroll */
    height: 100%;
}

body {
    font-family: var(--sans);
    background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
    background-attachment: fixed; /* Keeps gradient fixed while scrolling */
    color: var(--ink);
    margin: 0;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

zero-md {
    display: block;
    margin-top: 0;
    padding-top: 0;
}

/* --- TEXT LINK STYLES (Paragraphs) --- */
a { 
    color: var(--link); 
    text-decoration: none; 
    font-weight: 600; 
    border-bottom: 3px solid var(--highlight); 
    padding: 0 2px;
    position: relative; 
    top: 0; 
    transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.2s ease, 
                box-shadow 0.2s ease,
                color 0.2s ease;
}

a:hover { 
    background-color: var(--highlight); 
    color: #5A1EF0; /* Hover text colour */
    border-bottom-color: transparent; 
    border-radius: 2px;
    top: -3px; 
    box-shadow: 3px 3px 0px #5A1EF0;
}

/* --- HEADER & NAV --- */
header { padding: 40px 0; margin-bottom: 0px; }

.site-title { 
    font-size: 1.8rem; 
    font-weight: 900; 
    color: var(--ink); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border-bottom: none;
    display: inline-block;
/*     padding: 4px 8px; */
}

.site-title:hover { 
    background-color: var(--highlight);
    color: #5A1EF0;
    box-shadow: none;
    top: 0; 
}

nav { margin-top: 15px; }
nav a { 
    margin-right: 20px; 
    color: var(--ink); 
    opacity: 0.8; 
    font-size: 1.1rem;
    border-bottom: none; 
    display: inline-block; 
}
nav a:hover { 
    opacity: 1; 
    background-color: var(--highlight);
    box-shadow: 4px 4px 0px var(--visited);
    top: -3px; 
}

/* --- TEXT SELECTION COLOUR --- */
::selection {
    background: var(--text-highlight);
    color: var(--text-highlight-ink);
}

/* Typography */
h1, h2, h3 { font-family: var(--serif); color: var(--ink); }
h2 { font-size: 2rem; margin-top: 0;}

/* Intro Section */
.intro-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 60px;
}
.profile-pic {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
	box-shadow: 8px 8px 0px #5A1EF0;
    flex-shrink: 0;
    background-color: #ddd; 
    border: 4px solid white;
}
.intro-text p { font-size: 1.1rem; }

/* --- CARD STYLES (Works) --- */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.work-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 18px;
    border-bottom: none; 
    background: #E9DBFC; /* UPDATED */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    top: 0;
}

/* Card title text – only the main title span inside the link */
.work-item a > span:not(.tag) {
    font-weight: bold;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: #6218FA;
}

/* Tag container under work titles */
.work-tags {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* Individual tag pill – tiny, code/date-like */
.work-tags .tag {
    position: relative;
    font-family: "Courier New", monospace; /* same family as .date */
    font-size: 0.7rem;                     /* noticeably smaller */
    font-weight: bold;
    letter-spacing: 0.03em;
    text-transform: lowercase;

    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(98, 24, 250, 0.10);
    color: #6218FA;
    border: 1px solid rgba(98, 24, 250, 0.4);
    box-shadow: none;
}

/* Individual tag pill – tiny code-like labels */
.tag {
    position: relative;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
    font-size: 0.65rem;          /* smaller text */
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: lowercase;

    padding: 1px 6px;            /* tighter pill */
    border-radius: 999px;
    background: rgba(98, 24, 250, 0.10);
    color: #6218FA;
    border: 1px solid rgba(98, 24, 250, 0.4);
    box-shadow: none;
}

.work-item img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 9px;
    margin-bottom: 12px;
    background-color: #ccc;
    transition: opacity 0.2s;
}

.work-item a:hover {
    transform: translateY(-8px); 
    top: 0; 
    background-color: white;
    box-shadow: 8px 8px 0px #5A1EF0; /* UPDATED */
    color: var(--ink);
}

/* Card title text */
.work-item span {
    font-weight: bold;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: #6218FA; /* UPDATED */
}

/* Blog List */
.blog-list { list-style: none; padding: 0; margin-bottom: 60px;}
.blog-list li {
    margin-bottom: 18px;
    font-size: 1.1rem;
    display: flex;
    align-items: baseline;   /* <- this is why the icon sits low */
}

/* Override just for the podcasts section */
#podcasts .blog-list li {
    align-items: center;     /* vertically center icon + text */
}

.date { 
    font-family: "Courier New", monospace; 
    color: var(--link);
    margin-right: 20px; 
    font-size: 0.85em; 
    font-weight: bold;
    min-width: 90px;
}

/* Footer */
footer {
    margin-top: auto;
    padding: 40px 0;
    text-align: center;
    font-size: 0.9em;
    opacity: 0.6;
    border-top: 1px solid rgba(36, 0, 70, 0.1);
}

@media (max-width: 600px) {
    .intro-grid { flex-direction: column; align-items: center; text-align: center; }
    .profile-pic { width: 150px; height: 150px; }
    .works-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .intro-text p {
        text-align: left;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Star Wars page background – heavy bright-star field */
body.sw-page-mode {
    background:

        /* tiny dim stars (same as before) */
        radial-gradient(1px 1px at 4% 8%,   rgba(255,255,255,0.25) 50%, transparent 51%),
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.30) 50%, transparent 51%),
        radial-gradient(1px 1px at 20% 32%, rgba(255,255,255,0.28) 50%, transparent 51%),
        radial-gradient(1px 1px at 28% 50%, rgba(255,255,255,0.30) 50%, transparent 51%),
        radial-gradient(1px 1px at 36% 72%, rgba(255,255,255,0.27) 50%, transparent 51%),
        radial-gradient(1px 1px at 44% 88%, rgba(255,255,255,0.26) 50%, transparent 51%),
        radial-gradient(1px 1px at 56% 14%, rgba(255,255,255,0.25) 50%, transparent 51%),
        radial-gradient(1px 1px at 64% 36%, rgba(255,255,255,0.29) 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 54%, rgba(255,255,255,0.28) 50%, transparent 51%),
        radial-gradient(1px 1px at 80% 68%, rgba(255,255,255,0.30) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 82%, rgba(255,255,255,0.27) 50%, transparent 51%),
        radial-gradient(1px 1px at 94% 24%, rgba(255,255,255,0.26) 50%, transparent 51%),

        /* ---- brighter stars (original) ---- */
        radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,255,255,0.80) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 30% 20%, rgba(255,255,255,0.75) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 52% 78%, rgba(255,255,255,0.80) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 72% 38%, rgba(255,255,255,0.78) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 90% 86%, rgba(255,255,255,0.80) 40%, transparent 41%),

        /* ---- brighter stars (extra set 1) ---- */
        radial-gradient(1.5px 1.5px at 18% 75%, rgba(255,255,255,0.82) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 42% 12%, rgba(255,255,255,0.78) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 60% 48%, rgba(255,255,255,0.80) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,0.76) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 86% 58%, rgba(255,255,255,0.82) 40%, transparent 41%),

        /* ---- brighter stars (extra set 2 — NEW) ---- */
        radial-gradient(1.5px 1.5px at 8% 85%,  rgba(255,255,255,0.85) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 22% 45%, rgba(255,255,255,0.82) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 38% 90%, rgba(255,255,255,0.78) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 58% 32%, rgba(255,255,255,0.83) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 66% 66%, rgba(255,255,255,0.85) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 74% 12%, rgba(255,255,255,0.80) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 88% 44%, rgba(255,255,255,0.85) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 95% 72%, rgba(255,255,255,0.80) 40%, transparent 41%),

        /* cool purple/blue nebula glows */
        radial-gradient(circle at 20% 10%, rgba(120, 70, 255, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 76% 78%, rgba(40, 110, 255, 0.16) 0%, transparent 60%),

        /* deep space base */
        radial-gradient(circle at center, #050316 0%, #02000a 55%, #000006 100%);

    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Optional: slightly wider content on this page */
body.sw-page-mode .container {
    max-width: 960px;
}

/* Inline highlighted text (e.g. <mark>) */
mark {
    background-color: var(--highlight); /* #F5C042 */
    color: #5A1EF0;                     /* same purple as your hover text */
    padding: 0 3px;
    border-radius: 2px;
}

/* Demo “visited-style” link class used in css-test post */
a.visited {
    color: var(--visited);               /* dark purple */
    border-bottom-color: var(--visited);
    background-color: transparent;
    box-shadow: none;
}

/* Demo “hover-style” link that always looks hovered */
a.hover-demo {
    background-color: var(--highlight);
    color: var(--text-highlight);
    border-bottom-color: transparent;
    top: -3px;
    box-shadow: 3px 3px 0px var(--visited);
}

.spoiler {
    background-color: rgba(0, 0, 0, 0.85);
    color: transparent;              /* fully hidden */
    border-radius: 4px;
    padding: 0 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Optional: avoid text appearing if selected */
.spoiler::selection {
    background: transparent;
    color: transparent;
}

.spoiler:hover {
    background-color: rgba(245, 192, 66, 0.2);
    color: var(--ink);               /* reveal on hover */
}

/* Generic image grid used in css-test post */
.image-grid {
    display: grid;
    gap: 20px;
    margin: 20px 0 30px;
}

.image-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.image-grid figure {
    margin: 0;
    text-align: center;
}

.image-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    display: block;
}

.image-grid figcaption {
    margin-top: 8px;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Small text used in css-test post */
small {
    font-size: 0.85em;
    opacity: 0.8;
}

/* --- IMAGE GRID LIGHTBOX --- */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 3, 18, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    z-index: 9999;
}

.lightbox-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 960px;
    width: 90%;
    max-height: 90vh;
    background: rgba(24, 16, 70, 0.96);
    border-radius: 16px;
    border: 1px solid rgba(245, 192, 66, 0.5);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    padding: 16px 16px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lightbox-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    display: block;
}

.lightbox-caption {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* Close button – large circular button */
.lightbox-close {
    position: absolute;
    top: 8px;
    right: 14px;

    width: 44px;
    height: 44px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(210, 210, 230, 0.12);
    border: 1px solid rgba(245, 192, 66, 0.7);
    color: var(--ink);

    font-size: 2.1rem;   /* still big, but fits the circle better */
    line-height: 1;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

/* Arrows – light buttons on dark background */
.lightbox-arrow {
    background: rgba(210, 210, 230, 0.9);          /* light button */
    border: 1px solid rgba(245, 192, 66, 0.8);
    border-radius: 999px;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    color: #050318;                                /* dark arrow icon */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.7);
}

/* Hover states */
.lightbox-arrow:hover,
.lightbox-close:hover {
    background-color: rgba(245, 192, 66, 0.3);
    transform: translateY(-1px);
}

/* Make grid images obviously interactive */
.image-grid img {
    cursor: zoom-in;
}

@media (max-width: 600px) {
    .lightbox-content {
        width: 96%;
        padding: 12px 10px 16px;
    }
    .lightbox-arrow {
        width: 32px;
        height: 32px;
    }
}

.pod-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;   /* rounds corners */
    margin-right: 8px;    /* space before link */
    vertical-align: middle;
}

/* --- FESTIVE SNOW TOGGLE --- */

.snow-toggle {
    margin-left: 8px;
    font-size: 1.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    position: relative;
    top: 0;
    transition:
        top 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
    border-radius: 6px;
}

.snow-toggle:hover {
    top: -2px;
    background-color: var(--highlight);
    box-shadow: 3px 3px 0px var(--visited);
}

.snow-toggle.is-on {
    top: -2px;
    background-color: var(--highlight);
    box-shadow: 3px 3px 0px var(--visited);
}

footer .snow-toggle {
    margin-left: 6px;
    vertical-align: middle;
}

/* Snow container overlay stays the same */
#snow-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 999; /* below lightbox but above content */
}

/* Individual snowflakes */
.snowflake {
    position: absolute;
    top: -60px;            /* start well above the top edge */
    color: #ffffff;
    opacity: 0.9;
    user-select: none;
    animation-name: snowfall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    will-change: transform, opacity;
}

/* Straight down */
@keyframes snowfall {
    0% {
        transform: translate3d(0, 0, 0);          /* no extra jump */
    }
    100% {
        transform: translate3d(0, 120vh, 0);      /* fall past bottom */
    }
}

/* Wind to the left */
@keyframes snowfall-left {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-20px, 60vh, 0);
    }
    100% {
        transform: translate3d(-40px, 120vh, 0);
    }
}

/* Wind to the right */
@keyframes snowfall-right {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(20px, 60vh, 0);
    }
    100% {
        transform: translate3d(40px, 120vh, 0);
    }
}

/* Podcast headings inside markdown */
.pod-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pod-title .pod-icon {
    width: 25px;
    height: 25px;
    border-radius: 4px;
    flex-shrink: 0;
    margin: 0; /* no extra margin inside heading */
}