@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


:root {
	--text: #4a4552;
	--border: #b8a9b5;
	--accent: #9b8aa3;
	--bg: #f4f2f0;
	--box: #ebe8e5;
	--gradientBottom: #e5dfe0;
	--gradientTop: #d8d2d4;
	--container: #e9e4e3;
	--thumb: #c3b8bd;
	--link_grad: #a594a8;
	--line: #8c7ca7;
	--image_border: #b5a4b0;
	--button-bg: #bfb0ba;
	--button-text: #f4f2f0;
	--button-border: #a594a8;
	--code: #7d9b8a;
	--code-background: #eae7e4;
	--code-border: #a8b3a7;
	--icon-filter: none;
	--smoothlife-filter: invert(1);
	--toggle-bg: #bfb0ba;
	--toggle-text: #f4f2f0;
	--toggle-border: #a594a8;
	a:link { color: #8f7d96; }
}

.dark-mode {
	--text: rgb(255, 255, 232);
	--border: #43048f;
	--accent: #c0d73a;
	--bg: #362d42;
	--box: #1d1b20;
	--gradientBottom: #14101b;
	--gradientTop: #14101b;
	--container: #11042a;
	--thumb: #5333c7;
	--link_grad: #636832;
	--line: #542fb3;
	--image_border: #542fb3;
	--button-bg: rgba(143, 164, 0, 0.425);
    --button-text: white;
	--button-border: rgb(65, 0, 163);
	--code: #dee77d;
	--code-background: #1d1b1f;
	--code-border: #43048f;
	--icon-filter: none;
	--smoothlife-filter: none;
	--toggle-bg: rgba(113, 118, 78, 0.341);
	--toggle-text: white;
	--toggle-border: rgb(65, 0, 163);
	a:link { color: rgb(213, 212, 162); }
}

/* .sunset-theme {
	--text: #fff3e0;
	--border: #5d3a1a;
	--accent: #ff6f00;
	--bg: #3e2723;
	--box: #2e1a16;
	--gradientBottom: #8d6e63;
	--gradientTop: #a1887f;
	--container: #5d4037;
	--thumb: #7a5346;
	--link_grad: #a1887f;
	--line: #ff8a65;
	--image_border: #ff7043;
	--button-bg: #8d6e63;
    --button-text: #fff3e0;
	--button-border: #ff6f00;
	--code: #ffcc80;
	--code-background: #4e342e;
	--code-border: #ff7043;
	a:link { color: #ffccbc; }
} */

.midnight-theme {
	--text: #e8e8e8;
	--border: #3a3a3a;
	--accent: #b0b0b0;
	--bg: #1a1a1a;
	--box: #0f0f0f;
	--gradientBottom: #2a2a2a;
	--gradientTop: #404040;
	--container: #222222;
	--thumb: #4a4a4a;
	--link_grad: #555555;
	--line: #666666;
	--image_border: #5a5a5a;
	--button-bg: #333333;
    --button-text: #e8e8e8;
	--button-border: #555555;
	--code: #c0c0c0;
	--code-background: #1a1a1a;
	--code-border: #444444;
	--icon-filter: grayscale(1);
	--smoothlife-filter: grayscale(1);
	--toggle-bg: #333333;
	--toggle-text: #e8e8e8;
	--toggle-border: #555555;
	a:link { color: #c8c8c8; }
}

* { 
	box-sizing: border-box;
}

@supports (height: 100dvh) {
	body {
	  min-height: 100dvh; /* Uses dynamic viewport height */
	}
}

#theme-toggle {
    display: block;
    margin: 14px auto;
	font-size: 1rem;
	padding: 2px 8px;
	background-color: var(--toggle-bg);
	color: var(--toggle-text);
	border-color: var(--toggle-border);
}

button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    border-radius: 4px;
    padding: 3px 5px;
	margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.container {
	max-width: 75rem;
	margin: 5vw auto 12px auto;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;
	overflow: visible;
	position: relative;
	z-index: 1; /* keep content above the background particle canvas */
	background-color: var(--container);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.40);
}

/* Sidebar container should not interfere with flex layout */
#sidebar-container {
	display: contents; /* Makes the container "transparent" to flex layout */
}

/* Hide sidebar until loaded to prevent flash of unstyled content */
#sidebar-container.sidebar-loading > * {
	display: none !important;
}

/* Initial loading state - everything hidden */
/* Start hidden by default to prevent flash */
.container {
	opacity: 0;
}

.container.container-loading {
	opacity: 0;
}

.container.container-loading::before,
.container.container-loading::after {
	opacity: 0;
}

/* Loaded state - container fades in first, then decorations */
.container.container-loaded {
	opacity: 1;
	transition: opacity 0.35s ease-in; /* 30% faster: 0.5s * 0.7 = 0.35s */
}

.container.container-loaded::before,
.container.container-loaded::after {
	opacity: 1;
	transition: opacity 0.35s ease-in 0.35s; /* 30% faster: 0.5s * 0.7 = 0.35s, delayed by 0.35s */
}

/* When leaving page (add this class via JS before navigation) */
.container.container-unloading::before,
.container.container-unloading::after {
	opacity: 0;
	transition: opacity 0.28s ease-out; /* 30% faster: 0.4s * 0.7 = 0.28s */
}

.container.container-unloading {
	opacity: 0;
	transition: opacity 0.35s ease-out 0.28s; /* 30% faster: 0.5s * 0.7 = 0.35s, delayed by 0.28s */
}

/* these control the column widths */
.small { flex: 0 0 160px; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }

main {
	display: contents;
}

.posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	border: none; /* Ensure no border is applied */
    outline: none; /* Prevent accidental outlines */
    box-shadow: none; /* Remove any shadow effects */
}

.column {
    flex: 1;
    min-width: 300px; /* Ensures responsiveness */
}

hr {
    margin: 2em 0;
    border: none;
    display: block;
    width: 100%;
    background-image: url('/assets/border3.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    aspect-ratio: 3450 / 160;
}

.smoothlife-side-col {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: flex-start;
}

#smoothlife-controls-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.smoothlife-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    width: 100%;
    overflow: hidden;
    border: 2px ridge var(--border);
    border-radius: 5px;
    background: linear-gradient(var(--gradientTop), var(--gradientBottom));
    padding: 5px;
    padding-bottom: 0.75rem;
    box-sizing: border-box;
}

.smoothlife-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    /* Extra breathing room above the top slider. This also grows the side
       column by ~1em, and the canvas section (whose height is synced to the
       side column's) follows, keeping the two boxes' bottoms aligned. */
    padding-top: 1em;
}

.smoothlife-row {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--text);
}

.smoothlife-label {
    min-width: 3em;
    text-align: right;
    opacity: 0.8;
}

.smoothlife-val {
    min-width: 2.6em;
    font-family: monospace;
    color: var(--accent);
}

.smoothlife-slider {
    width: 45px;
    flex: none;
    height: 2px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin-top: 0;
}

.smoothlife-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    border: none;
}

.smoothlife-slider::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    border: none;
}

.smoothlife-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.smoothlife-presets {
    display: grid;
    grid-template-columns: repeat(3, 16px);
    grid-auto-rows: 16px;
    gap: 0;
    width: fit-content;
}

.smoothlife-pause-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
    cursor: pointer;
    font-size: 20px;
    color: var(--accent);
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.smoothlife-pause-btn:hover {
    opacity: 1;
}

.smoothlife-preset-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    color: var(--accent);
}

.smoothlife-dot-active {
    font-size: 0.72rem;
    font-weight: bold;
}


#smoothlife-canvas {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
    cursor: crosshair;
    filter: var(--smoothlife-filter);
}

section:has(#smoothlife-canvas) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    background: url('/assets/bg_lighter_purp.webp') no-repeat center center fixed;
    background-size: cover;
}

html.dark-mode section:has(#smoothlife-canvas) {
    background: url('/assets/bg8_dark_2.webp') no-repeat center center fixed;
    background-size: cover;
}

html.midnight-theme section:has(#smoothlife-canvas) {
    background: url('/assets/dark_bw_1.webp') no-repeat center center fixed;
    background-size: cover;
}

/* Remove expand icons */
.image-link-expand {
    display: none !important;
}

/* For images without captions */
.captioned-image-container img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
	border: 4px solid var(--image_border);
	padding: 0px;
    margin-top: 25px; /* Adjust as needed */
    margin-bottom: 0px; /* 40px below the image if there's no caption */
    cursor: pointer;
    transition: opacity 0.2s;
}

.captioned-image-container img:hover {
    opacity: 0.85;
}

.frontend-components-ImageGallery-module__image--g2yvp {
    border: 4px solid var(--image_border);
	padding: 0px;
}

figcaption {
    text-align: center;
    font-size: 0.85em;
}

.captioned-image-container figure {
    margin: 0;
}

.captioned-image-container figcaption {
    margin-top: 4px;
    margin-bottom: 25px;
}

/* Adjusting only when the image has a caption */
.captioned-image-container figure:not(:has(figcaption)) img {
    margin-bottom: 20px;  /* Applies 40px margin when there is no caption */
}

/* Image gallery styles */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 25px auto 30px auto;
    max-width: 90%;
}

.image-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border: 4px solid var(--image_border);
    padding: 0px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    cursor: pointer;
    transition: opacity 0.2s;
}

.image-gallery img:hover {
    opacity: 0.85;
}

.image-gallery.gallery-4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 70%;
}

/* Image lightbox */
.image-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.image-lightbox.active {
    display: flex;
}

.image-lightbox img {
    max-width: 95%;
    max-height: 95%;
    border: 4px solid var(--image_border);
    object-fit: contain;
    cursor: grab;
    transition: none;
}

.lightbox-controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 10px;
    z-index: 10000;
}

.lightbox-btn {
    width: 40px;
    height: 40px;
    background-color: var(--bg);
    border: 2px solid var(--border);
    color: var(--text);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    user-select: none;
}

.lightbox-btn:hover {
    background-color: var(--border);
    transform: scale(1.1);
}

.lightbox-btn:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .image-gallery.gallery-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .image-gallery {
        grid-template-columns: 1fr;
    }
}

.footnote-anchor {
    color: #a6e70f !important; /* Added !important to override other link styles */
    font-size: 0.8em; /* Adjust size as needed */
    vertical-align: super; /* Ensures the superscript effect */
	margin-left: 0.2em; /* Adds space before the reference */
    margin-right: 0.2em; /* Adds space after the reference */
	position: relative; /* Needed for positioning the tooltip */
	cursor: pointer;
}

/* Tooltip element (created by JavaScript) */
.footnote-tooltip {
	position: fixed;
	transform: translate(-50%, -100%);
	background-color: var(--bg, #e8e0d8);
	color: var(--text, #000);
	border: 2px ridge var(--border, #8f7aa8);
	border-radius: 5px;
	padding: 8px 12px;
	font-size: 0.9rem;
	max-width: 450px;
	width: max-content;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	font-weight: normal;
	line-height: 1.4;
	text-align: left;
	cursor: default;
	pointer-events: auto;
	will-change: transform, opacity;
}

.footnote-tooltip.visible {
	opacity: 1;
	visibility: visible;
}

/* Tooltip arrow */
.footnote-tooltip-arrow {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--border, #8f7aa8);
}

.small img {
    max-width: 104%;
    height: auto;
    display: block;
    margin: 0px auto;
}

/* Music Player Styles */
.music-player {
    margin: 8px auto 15px auto;
    padding: 10px;
    max-width: 140px;
    font-size: 11px;
    border: 2px ridge var(--border);
    border-radius: 5px;
    background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

#track-name {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 18px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 4px;
    text-align: left;
    color: var(--text);
}

#track-name span {
    display: inline-block;
    white-space: nowrap;
}

#track-name .cjk-char {
    display: inline;
    font-size: 0.68em;
    vertical-align: 0.08em;
}


.player-time-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
    height: 22px;
}

.station-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 4px;
    height: 22px;
}

#station-name {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--text);
    flex: 1;
}

#station-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text);
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 13px;
    padding: 1px 4px;
    margin-top: 0;
    cursor: pointer;
    line-height: 1.4;
    opacity: 0.8;
}

#station-btn:hover {
    opacity: 1;
}

#time-display {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 18px;
    color: var(--text);
    min-width: 35px;
}

.player-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

#play-btn {
    position: relative;
    top: -1.73px;
}

.player-controls button {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
    cursor: pointer;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 16px;
    transition: opacity 0.2s ease;
    color: var(--text);
    width: 20px;
    text-align: center;
}

.player-controls button:hover {
    opacity: 0.7;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    height: 20px;
}

.volume-control span {
    font-size: 20.16px;
    color: var(--text);
    display: inline-block;
    transform: scaleX(-1);
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -2.64px;
}

#volume-slider {
    width: 80px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 16px;
    background: var(--line, #877db6);
    cursor: pointer;
    border-radius: 2px;
    border: none;
}

#volume-slider::-moz-range-thumb {
    width: 8px;
    height: 16px;
    background: var(--line, #877db6);
    cursor: pointer;
    border-radius: 2px;
    border: none;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
}

.social-icons:last-of-type {
    margin-bottom: 1cm;
}

.social-icons a img {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s ease, filter 0.3s ease;
    filter: var(--icon-filter);
}

.social-icons a img:hover {
    opacity: 0.7;
}

.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;
}

.sidebar-player {
	margin-top: 24px;
	padding: 14px 12px;
	border: 2px ridge var(--border);
	border-radius: 10px;
	background: linear-gradient(var(--gradientTop), var(--gradientBottom));
	box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--text);
}

.sidebar-player .player-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.68rem;
	color: var(--accent);
	opacity: 0.9;
}

.sidebar-player .player-heading .player-label {
	flex: 1;
}

.sidebar-player .player-heading .player-collapse {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	font-size: 0.85rem;
	line-height: 1;
	padding: 0;
}

.sidebar-player.is-collapsed .player-heading .player-collapse {
	transform: rotate(180deg);
}

.sidebar-player .player-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sidebar-player.is-collapsed .player-body {
	display: none;
}

.sidebar-player .player-artwork {
	width: 100%;
	max-width: 150px;
	margin: 0 auto;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid var(--image_border);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.sidebar-player .player-artwork img {
	display: block;
	width: 100%;
	height: auto;
}

.sidebar-player .player-track-info {
	text-align: center;
	line-height: 1.3;
}

.sidebar-player .player-track-title {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
}

.sidebar-player .player-track-artist {
	display: block;
	font-size: 0.78rem;
	opacity: 0.75;
}

.sidebar-player .player-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.sidebar-player .player-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--button-bg);
	color: var(--button-text);
	border: 1px solid var(--button-border);
	font-size: 0.9rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sidebar-player .player-btn:hover,
.sidebar-player .player-btn:focus {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	outline: none;
}

.sidebar-player .player-btn.is-active {
	background: var(--accent);
	color: #111;
}

.sidebar-player .player-btn.player-play {
	width: 40px;
	height: 40px;
	font-size: 1rem;
}

.sidebar-player .player-btn.player-play .player-play-icon {
	display: inline;
}

.sidebar-player .player-btn.player-play .player-pause-icon {
	display: none;
}

.sidebar-player .player-btn.player-play.is-playing .player-play-icon {
	display: none;
}

.sidebar-player .player-btn.player-play.is-playing .player-pause-icon {
	display: inline;
}

.sidebar-player .player-progress,
.sidebar-player .player-volume {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sidebar-player input[type="range"] {
	width: 100%;
	appearance: none;
	height: 5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.25);
	outline: none;
}

.sidebar-player input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
	border: 1px solid rgba(255, 255, 255, 0.9);
	cursor: pointer;
}

.sidebar-player input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
	border: 1px solid rgba(255, 255, 255, 0.9);
	cursor: pointer;
}

.sidebar-player .player-timecodes {
	display: flex;
	justify-content: space-between;
	font-size: 0.72rem;
	opacity: 0.8;
}

.sidebar-player .player-volume {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.sidebar-player .player-volume .player-btn {
	width: 30px;
	height: 30px;
	border-radius: 6px;
}

.sidebar-player .player-status {
	min-height: 1em;
	font-size: 0.7rem;
	text-align: center;
	color: var(--accent);
	opacity: 0.85;
}

.sidebar-player .player-status.player-status--error {
	color: #ffb3b3;
	opacity: 1;
}



html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto; /* Changed from hidden to auto */
}

/* Blurry floating depth-of-field particles (see particles.js).
   Sits above the fixed html background but behind all page content. */
#bg-particles {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* above the fixed html background, below page content */
    pointer-events: none;
    /* light global blur only — per-particle softness is done in the canvas
       gradients so small "near" particles stay crisp */
    filter: blur(4px);
    opacity: 1;
    /* elliptical vignette: particles envelop all four borders and fade out
       toward the centre of the screen */
    -webkit-mask-image: radial-gradient(ellipse 58% 62% at center,
        rgba(0,0,0,0) 32%,
        rgba(0,0,0,0.3) 58%,
        rgba(0,0,0,0.8) 82%,
        rgba(0,0,0,1) 100%);
    mask-image: radial-gradient(ellipse 58% 62% at center,
        rgba(0,0,0,0) 32%,
        rgba(0,0,0,0.3) 58%,
        rgba(0,0,0,0.8) 82%,
        rgba(0,0,0,1) 100%);
}

@media (prefers-reduced-motion: reduce) {
    #bg-particles { opacity: 0.6; }
}

/* Subtle edge darkening (vignette) hugging the screen borders, sitting just
   above the particle canvas but still behind page content. */
#bg-vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 72% 76% at center,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.18) 84%,
        rgba(0,0,0,0.38) 100%);
}

/* Bright theme: lighten toward the edges, and fake chromatic aberration by
   offsetting a warm (red) and a cool (cyan) radial ring in opposite
   directions. Where they overlap -> white-ish lightening; at the fringes the
   channels separate into red/cyan, and saturation rises toward the border. */
#bg-vignette.light-vignette {
    background:
        radial-gradient(ellipse 72% 76% at 46% 48%,
            rgba(255, 60, 90, 0) 62%,
            rgba(255, 60, 90, 0.16) 86%,
            rgba(255, 40, 70, 0.34) 100%),
        radial-gradient(ellipse 72% 76% at 54% 52%,
            rgba(40, 170, 255, 0) 62%,
            rgba(40, 170, 255, 0.16) 86%,
            rgba(20, 150, 255, 0.34) 100%),
        radial-gradient(ellipse 72% 76% at center,
            rgba(255,255,255,0) 60%,
            rgba(255,255,255,0.22) 84%,
            rgba(255,255,255,0.5) 100%);
    mix-blend-mode: screen;
}

html {
    background: #f4f2f0 url('/assets/bg_lighter_purp.webp') no-repeat center center fixed;
    background-size: cover;
}

html.dark-mode {
    background: #3f3554 url('/assets/bg8_dark_2.webp') no-repeat center center fixed;
    background-size: cover;
}

/* html.sunset-theme {
    background: #3e2723 url('/assets/bg8_light.webp') no-repeat center center fixed;
    background-size: cover;
} */

html.midnight-theme {
    background: #1a1a1a url('/assets/dark_bw_1.webp') no-repeat center center fixed;
    background-size: cover;
}

body {
	font-family: 'MS PGothic', sans-serif;
    color: var(--text);
    background: transparent;
    padding: 10px;
    min-height: 100vh;
    overflow-x: hidden;
	font-size: 18px;
}

pre {
	white-space: pre-wrap; /* Ensures text wraps instead of overflowing */
    word-wrap: break-word; /* Breaks long words to fit within the container */
    overflow-wrap: break-word; /* Additional compatibility for word breaking */
    max-width: 100%; /* Prevents exceeding the container width */
    background-color: var(--code-background); /* Light gray background */
    border: 1px solid var(--code-border); /* Subtle frame */
    padding: 10px; /* Adds spacing inside the box */
    border-radius: 5px; /* Slightly rounded corners */
    overflow-x: auto; /* Enables horizontal scrolling if needed */
    max-width: 100%; /* Ensures it fits within the container */
}

code {
    font-family: monospace; /* Ensures a code-friendly font */
    color: var(--code); /* Darker text for readability */
}


header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px;
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
	display: flex;
    align-items: center;
    padding: 10px;
    gap: 15px;
	flex: 1 1 100%; /* Makes header take full width in flex container */
}
.header-image {
    width: 100px; /* Adjust size */
    height: 100px;
    object-fit: cover;
    border: 4px solid #282536; /* Frame effect */
    border-radius: 10px; /* Optional rounded corners */
    margin-left: 2px; /* Moves image away from the left frame */
}

header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
}


nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	margin: 5px;
	background: linear-gradient(to right,var(--link_grad),var(--gradientBottom));
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--link_grad), var(--gradientBottom), var(--gradientTop));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border:2px ridge var(--border);
	border-radius: 5px;
}

section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
	padding: 5px;
}

/* Hide the page scrollbar on the hearth (index) page (still scrollable). */
body.page-hearth {
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* legacy Edge/IE */
}
body.page-hearth::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;                /* Chrome/Safari */
}

/* ── Vespers / radio page ─────────────────────────────────────────── */
#radio-page {
	font-family: 'VT323', 'Courier New', monospace;
	color: var(--text);
	padding: 4px;
}
/* Station list (left) and the passage (right) share a row. The gap is the
   fixed gutter that keeps the quote's left edge equidistant from the
   left-justified station/track text no matter how either column wraps. */
.radio-layout {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
}
.radio-stations-col {
	/* Sized to its content, but allowed to shrink so the passage can take the
	   larger share of the row. */
	flex: 0 1 auto;
}
.radio-quote {
	/* Non-zero basis makes the passage's box start out wide, so its left edge
	   sits roughly twice as far to the left before the lines wrap. The gap to
	   the stations column stays fixed at 3rem. */
	flex: 1 1 66%;
	min-width: 0;
	/* Drop the passage ~two tabs down the page and hold it ~one tab off the
	   right edge. */
	margin: 4rem 0 0 0;
	padding: 0.2em 2.4rem 0.2em 0.1em;
	text-align: right;
	font-style: italic;
	/* Not VT323 — an unpixelated serif for the recessed, engraved look. */
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.73rem;
	line-height: 1.5;
	/* Silvery grey with a faint glow, held a touch more faint. */
	color: #b9bcc4;
	opacity: 0.44;
	/* Recessed / engraved effect: a dark shadow above and a light highlight
	   below make the letterforms read as pressed into the page. The soft blur
	   adds the slight glow. */
	text-shadow:
		0 -1px 1px rgba(0, 0, 0, 0.55),
		0 1px 1px rgba(255, 255, 255, 0.35),
		0 0 8px rgba(200, 205, 220, 0.35);
}
/* Light theme: flip the silvery grey to a dark, faintly purple-tinged tone in
   the family of the theme's --text (#4a4552) and --line (#8c7ca7), and flip the
   engrave so the highlight sits below dark ink on the pale page. */
html:not(.dark-mode):not(.midnight-theme) .radio-quote {
	color: #6a6076;
	text-shadow:
		0 1px 1px rgba(255, 255, 255, 0.6),
		0 -1px 1px rgba(60, 50, 75, 0.35),
		0 0 8px rgba(140, 124, 167, 0.3);
}

.radio-quote p {
	margin: 0 0 2.2em 0;
}
.radio-quote p:last-child {
	margin-bottom: 0;
}
/* The Eno passage sits four blank lines below the Nietzsche one. */
.radio-quote p.radio-quote-break {
	margin-top: 4em;
}
/* On narrow viewports drop the quote below the stations so neither is
   crushed; it stays right-justified. */
@media (max-width: 760px) {
	.radio-layout {
		flex-direction: column;
		gap: 1.6rem;
	}
	.radio-quote {
		width: 100%;
	}
}

.radio-station {
	margin-bottom: 0.7em;
}
/* Give the leading BACKGROUND row the same breathing room above it that
   sits between the sections below. */
.radio-station-background {
	margin-top: 0.7em;
}
.radio-station-title {
	display: inline-block;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 1.7rem;
	letter-spacing: 0.1em;
	color: var(--text);
	cursor: pointer;
	padding: 1px 5px;
	border-radius: 4px;
	transition: color 0.15s ease, text-shadow 0.15s ease;
}
.radio-station-title:hover {
	color: color-mix(in srgb, var(--text), var(--accent));
}
.radio-track-list {
	list-style: none;
	margin: 5px 0 0 0;
	padding-left: 12px;
}
.radio-track {
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 1.15rem;
	line-height: 1.4;
	color: var(--text);
	opacity: 0.9;
	cursor: pointer;
	/* Reserve the "> " marker gutter on the left at all times so selecting a
	   track never changes the text's available width (and thus its wrapping). */
	padding: 0 5px 0 1.1em;
	position: relative;
	border-radius: 3px;
	transition: color 0.15s ease;
}
.radio-track:hover {
	color: color-mix(in srgb, var(--text), var(--accent));
	opacity: 1;
}
/* Shrink CJK glyphs so they sit level with the VT323 latin text —
   mirrors #track-name .cjk-char in the sidebar player. */
.radio-track .cjk-char {
	display: inline;
	font-size: 0.68em;
	vertical-align: 0.08em;
}
.radio-current-station {
	color: var(--accent);
	font-weight: bold;
	text-shadow: 0 0 7px var(--line);
}
.radio-current-station::before {
	content: "> ";
}
.radio-current-track {
	color: var(--accent);
	/* Faux-bold via text-shadow adds no layout width, so the emphasised title
	   keeps the exact same wrapping as when unselected. */
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
	opacity: 1;
}
.radio-current-track::before {
	content: ">";
	/* Sits in the reserved left gutter, absolutely positioned so it never
	   contributes to the line's flow width. */
	position: absolute;
	left: 5px;
	top: 0;
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 2rem;
	letter-spacing: 2px;
	font-weight: bold;
	text-align: center;
	/* border-bottom: 2px ridge var(--border); */
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.4rem;
	font-weight: normal;
	text-align: center;
	margin-top: 10px;
    margin-bottom: 10px;
}
h3 { 
	font-size: 1.4rem;
	margin-top: 10px;
    margin-bottom: 10px;
}
h4 {
	font-size: 1.3rem;
	margin-top: 10px;
    margin-bottom: 10px;
}

p  { 
	margin: 5px;
	line-height: 1.2;
	margin-bottom: 1.2em;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}

.container::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -178px;
    width: 300px;
    height: 100%;
    background: url('/assets/side6.png') no-repeat left bottom;
    background-size: contain;
	z-index: 1;
	transform: rotate(38deg);
    pointer-events: none;
    transform-origin: left bottom;
}

.container::after {
    content: "";
    position: absolute;
    top: -70px;
    right: 75px;
    width: 1500px;
    height: 500px; /* Set a fixed height */
    background: url('/assets/side0.png') no-repeat right top;
    background-size: contain;
    transform: scaleX(-1);
    z-index: 1;
    pointer-events: none;
    transform-origin: right top;
}
  
.decoration-3 {
	/* New decoration with different positioning */
	position: absolute;
	pointer-events: none;
	z-index: 1;
	background-size: contain;
	background-repeat: no-repeat;
	bottom: 0;
	right: -0.5px;
	width: 710px;
	height: 892px;
	background-image: url('/assets/vest_bg2.png');
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
	/* Add any other transforms/positioning you need */
}

/* Custom Scrollbar Styles */
/* Works in Chrome, Edge, Safari, and Opera */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--bg);
	border-radius: 10px;
	border: 1px solid var(--border);
}

::-webkit-scrollbar-thumb {
	background: var(--thumb);
	border-radius: 10px;
	border: 2px solid var(--border);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--line);
}

::-webkit-scrollbar-corner {
	background: var(--bg);
}

/* Firefox scrollbar styles */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--thumb) var(--bg);
}

/* Footnote styling - make number and content inline */
.footnote {
	display: block;
	margin-bottom: 0.7em;
}

.footnote-number {
	display: inline;
	margin-right: 0.75em;
	font-weight: bold;
}

.footnote-number::after {
	content: ".";
}

.footnote-content {
	display: inline;
}

.footnote-content p {
	display: inline;
	margin: 0;
}

.footnote-content p:empty {
	display: none;
}

.pullquote {
	font-style: italic;
	text-align: center;
	margin: 1em 0;
}

.blinkies {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 4px 7px 4px;
	margin-left: -8px;
	margin-right: -5px;
	margin-top: -20px;
	justify-content: center;
	align-items: center;
	border-top: 3px solid var(--border);
}

.blinkies img {
	height: 31px;
	width: auto;
	max-width: none;
	image-rendering: pixelated;
	display: block;
}

.blinkies img.blinkie-invert {
	filter: invert(1);
}

.dark-mode .blinkies img.blinkie-invert,
.midnight-theme .blinkies img.blinkie-invert {
	filter: none;
}

.midnight-theme .blinkies img.blinkie-top {
	filter: grayscale(1);
}

/* Welcome popup */
#welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-box {
    background: var(--bg);
    border: 2px ridge var(--border);
    border-radius: 8px;
    padding: 32px 44px;
    text-align: center;
    color: var(--text);
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.35rem;
    line-height: 1.6;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.welcome-box p {
    margin: 0 0 0.4em 0;
}

.welcome-box p:last-of-type {
    margin-bottom: 1.4em;
}

#welcome-proceed {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.1rem;
    padding: 3px 18px;
    margin-top: 0;
    cursor: pointer;
}