Skateboarding on the Pacific Ocean - User contributions [en]

MediaWiki:Common.js

2026-04-16T11:00:46Z

King of the colours:

/**
* Willoughby Tucker, I'll Always Love You — MediaWiki Skin JS
* Ethel Cain, 2025
*
* Load via MediaWiki:Common.js or skin template
* Requires: vanilla JS, no dependencies
*
* Effects:
* 1. Amber loading bar
* 2. Dust particle system
* 3. Magnetic cursor (dot + ring)
* 4. Scroll-reveal observer
* 5. Sidebar link ripples
* 6. Title ambient pulse
* 7. Search placeholder cycling
* 8. VHS glitch on title
* 9. Table row glow
* 10. Fog parallax on sidebar
*/

/* ═══════════════════════════════════════════════════════
JS EFFECTS
═══════════════════════════════════════════════════════ */

/* 1. Amber loading bar */
(function() {
const bar = document.getElementById('loading-bar');
if (!bar) return;
let w = 0;
const iv = setInterval(() => {
w += Math.random() * 18 + 4;
if (w >= 95) { clearInterval(iv); w = 95; }
bar.style.width = w + '%';
}, 80);
window.addEventListener('load', () => {
clearInterval(iv);
bar.style.width = '100%';
setTimeout(() => { bar.style.opacity = '0'; bar.style.transition = 'opacity 0.5s'; }, 300);
});
})();

/* 2. Dust particle system */
(function() {
const canvas = document.getElementById('dust-canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
let W, H, particles = [];

function resize() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
}

function createParticle() {
return {
x: Math.random() * W,
y: H + Math.random() * 20,
vx: (Math.random() - 0.5) * 0.4,
vy: -(Math.random() * 0.6 + 0.1),
size: Math.random() * 2 + 0.3,
opacity: Math.random() * 0.5 + 0.1,
life: 0,
maxLife: Math.random() * 600 + 200,
hue: Math.random() * 20 + 25
};
}

for (let i = 0; i < 80; i++) {
const p = createParticle();
p.y = Math.random() * H;
p.life = Math.random() * p.maxLife;
particles.push(p);
}

function draw() {
ctx.clearRect(0, 0, W, H);
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.x += p.vx + Math.sin(p.life * 0.01) * 0.15;
p.y += p.vy;
p.life++;

const fade = p.life < 60 ? p.life / 60 : p.life > p.maxLife - 60 ? (p.maxLife - p.life) / 60 : 1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = `hsla(${p.hue}, 55%, 60%, ${p.opacity * fade})`;
ctx.fill();

if (p.life >= p.maxLife || p.y < -10) {
particles[i] = createParticle();
}
}

// Occasional larger dust mote
if (Math.random() < 0.01 && particles.length < 120) {
const mote = createParticle();
mote.size = Math.random() * 3 + 1.5;
mote.opacity = 0.08;
mote.vy = -(Math.random() * 0.2 + 0.05);
particles.push(mote);
}

requestAnimationFrame(draw);
}

resize();
window.addEventListener('resize', resize);
draw();
})();

/* 3. Magnetic cursor */
(function() {
const dot = document.getElementById('cursor-dot');
const ring = document.getElementById('cursor-ring');
if (!dot || !ring) return;

let mx = 0, my = 0, rx = 0, ry = 0;
let entered = false;

document.addEventListener('mouseenter', () => {
entered = true;
dot.style.opacity = '1';
ring.style.opacity = '1';
});

document.addEventListener('mouseleave', () => {
entered = false;
dot.style.opacity = '0';
ring.style.opacity = '0';
});

document.addEventListener('mousemove', e => {
mx = e.clientX; my = e.clientY;
dot.style.left = mx + 'px';
dot.style.top = my + 'px';
if (!entered) { dot.style.opacity = '1'; ring.style.opacity = '0.7'; entered = true; }
});

// Links make cursor expand
document.querySelectorAll('a, button').forEach(el => {
el.addEventListener('mouseenter', () => {
ring.style.width = '44px';
ring.style.height = '44px';
ring.style.borderColor = 'rgba(200,132,58,0.8)';
dot.style.transform = 'translate(-50%,-50%) scale(1.8)';
});
el.addEventListener('mouseleave', () => {
ring.style.width = '28px';
ring.style.height = '28px';
ring.style.borderColor = 'rgba(200,132,58,0.4)';
dot.style.transform = 'translate(-50%,-50%) scale(1)';
});
});

// Smooth ring follow
function lerp(a, b, t) { return a + (b - a) * t; }
function animate() {
rx = lerp(rx, mx, 0.12);
ry = lerp(ry, my, 0.12);
ring.style.left = rx + 'px';
ring.style.top = ry + 'px';
requestAnimationFrame(animate);
}
animate();
})();

/* 4. Scroll-reveal observer */
(function() {
const els = document.querySelectorAll('.scroll-reveal');
const obs = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('revealed');
obs.unobserve(e.target);
}
});
}, { threshold: 0.12 });
els.forEach(el => obs.observe(el));
})();

/* 5. Sidebar link ripple */
(function() {
document.querySelectorAll('.portal a').forEach(link => {
link.addEventListener('click', function(e) {
const ripple = document.createElement('span');
ripple.style.cssText = `
position: absolute;
border-radius: 50%;
background: rgba(200,132,58,0.25);
width: 6px; height: 6px;
top: 50%; left: ${e.offsetX}px;
transform: translate(-50%,-50%) scale(0);
animation: ripple-out 0.5s ease forwards;
pointer-events: none;
`;
link.appendChild(ripple);
setTimeout(() => ripple.remove(), 500);
});
});

const style = document.createElement('style');
style.textContent = `
@keyframes ripple-out {
to { transform: translate(-50%,-50%) scale(20); opacity: 0; }
}
`;
document.head.appendChild(style);
})();

/* 6. Ambient audio visualizer hint (subtle amber pulse on #firstHeading) */
(function() {
const title = document.getElementById('firstHeading');
if (!title) return;
let frame = 0;
function pulse() {
frame++;
const s = 1 + Math.sin(frame * 0.025) * 0.003;
const g = 0.3 + Math.sin(frame * 0.018) * 0.15;
title.style.textShadow = `0 2px ${30 + Math.sin(frame*0.02)*20}px rgba(200,132,58,${g})`;
requestAnimationFrame(pulse);
}
pulse();
})();

/* 7. Search bar typewriter placeholder cycling */
(function() {
const input = document.getElementById('searchInput');
if (!input) return;
const phrases = [
'search the dust…',
'find Willoughby…',
'janie, please stay…',
'nettles and ghosts…',
'waco, texas, 1986…',
'i\'ll always love you…'
];
let i = 0;
setInterval(() => {
if (document.activeElement !== input) {
i = (i + 1) % phrases.length;
input.placeholder = phrases[i];
}
}, 3200);
})();

/* 8. VHS glitch flicker on title — rare, occasional */
(function() {
const title = document.getElementById('firstHeading');
if (!title) return;
function maybeGlitch() {
if (Math.random() < 0.3) {
title.style.transition = 'none';
title.style.transform = `translateX(${(Math.random()-0.5)*3}px)`;
title.style.filter = 'brightness(1.3) saturate(0.5)';
setTimeout(() => {
title.style.transform = 'translateX(0)';
title.style.filter = '';
}, 60 + Math.random() * 80);
}
setTimeout(maybeGlitch, 4000 + Math.random() * 8000);
}
setTimeout(maybeGlitch, 5000);
})();

/* 9. Table row glow on hover */
(function() {
document.querySelectorAll('.wikitable tbody tr').forEach(row => {
row.addEventListener('mouseenter', () => {
row.style.boxShadow = 'inset 0 0 40px rgba(200,132,58,0.07)';
});
row.addEventListener('mouseleave', () => {
row.style.boxShadow = '';
});
});
})();

/* 10. Fog drifting parallax on sidebar */
(function() {
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
const offset = window.scrollY * 0.15;
const panel = document.getElementById('mw-panel');
if (panel) panel.style.backgroundPositionY = offset + 'px';
ticking = false;
});
ticking = true;
}
});
})();

MediaWiki:Common.css

2026-04-16T10:57:17Z

King of the colours:

/*
* Willoughby Tucker, I'll Always Love You — MediaWiki Skin
* Ethel Cain, 2025
* Compatible with: Timeless, Vector, MonoBook
*
* Import fonts in your wiki's MediaWiki:Common.css or skin template:
* @import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
*
* "the year everything changed forever"
*/

/* ═══════════════════════════════════════════════════════
WILLOUGHBY TUCKER, I'LL ALWAYS LOVE YOU
MediaWiki Skin — Ethel Cain, 2025
"the year everything changed forever"
Palette: amber headlights, sepia dust, bone white,
dried blood, fog-blue dusk, charcoal gospel
═══════════════════════════════════════════════════════ */

:root {
--amber: #C8843A;
--amber-pale: #E8C98A;
--amber-deep: #7A4A1A;
--amber-glow: #F5DBA0;
--sepia: #8B6344;
--sepia-dark: #3E2A18;
--sepia-pale: #D4B896;
--bone: #F2EDE0;
--bone-dark: #DDD5C0;
--dust: #C4B49A;
--parchment: #FAF5EC;
--fog: #B8C4CC;
--fog-deep: #6A7D87;
--dusk: #3A4A52;
--ink: #1A1410;
--dried-blood: #6B2A2A;
--dried-fade: #9B4A3A;
--gospel-dark: #2A1E12;
--vhs-flicker: rgba(200,132,58,0.06);

--font-title: 'IM Fell English', serif;
--font-heading: 'Playfair Display', serif;
--font-body: 'Courier Prime', monospace;
--font-ui: 'Special Elite', cursive;

--sidebar-w: 260px;
--border-grain: 1px solid rgba(139,99,68,0.3);
--border-amber: 1px solid rgba(200,132,58,0.5);
}

/* ── Grain texture overlay ── */
html::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
opacity: 0.6;
}

/* ── VHS scanline ── */
html::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.015) 2px,
rgba(0,0,0,0.015) 4px
);
pointer-events: none;
z-index: 9998;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: var(--font-body);
background-color: var(--gospel-dark);
color: var(--bone);
min-height: 100vh;
overflow-x: hidden;
}

/* ─────────────────────────────────────────────
AMBIENT BACKGROUND — dusk gradient + fog
───────────────────────────────────────────── */
#mw-page-base {
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse 80% 60% at 30% 80%, rgba(122,74,26,0.35) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 80% 20%, rgba(58,74,82,0.3) 0%, transparent 50%),
linear-gradient(175deg, #0D0B08 0%, #1A1410 40%, #2A1E12 100%);
}

/* ─────────────────────────────────────────────
LAYOUT
───────────────────────────────────────────── */
#mw-wrapper {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}

/* ─────────────────────────────────────────────
HEADER — masthead
───────────────────────────────────────────── */
#mw-head {
grid-column: 1 / -1;
position: relative;
padding: 0;
border-bottom: 1px solid rgba(200,132,58,0.25);
overflow: hidden;
background: linear-gradient(180deg, rgba(10,8,6,0.95) 0%, rgba(26,20,16,0.9) 100%);
}

/* Amber horizon glow behind header */
#mw-head::before {
content: '';
position: absolute;
bottom: -1px;
left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--amber-deep) 20%,
var(--amber) 50%,
var(--amber-deep) 80%,
transparent 100%
);
animation: horizon-pulse 4s ease-in-out infinite;
}

@keyframes horizon-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}

.mw-head-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
position: relative;
z-index: 1;
}

/* Wiki wordmark */
#p-logo {
display: flex;
flex-direction: column;
gap: 2px;
}

#p-logo .site-name {
font-family: var(--font-title);
font-size: 22px;
color: var(--amber-pale);
letter-spacing: 0.04em;
line-height: 1;
font-style: italic;
text-shadow: 0 0 30px rgba(200,132,58,0.4);
animation: amber-breathe 6s ease-in-out infinite;
}

@keyframes amber-breathe {
0%, 100% { text-shadow: 0 0 20px rgba(200,132,58,0.3); }
50% { text-shadow: 0 0 40px rgba(200,132,58,0.6), 0 0 80px rgba(200,132,58,0.2); }
}

#p-logo .site-tagline {
font-family: var(--font-ui);
font-size: 10px;
color: var(--sepia);
letter-spacing: 0.25em;
text-transform: uppercase;
}

/* ── Top navigation tabs ── */
#p-namespaces {
display: flex;
gap: 0;
}

#p-namespaces li {
list-style: none;
}

#p-namespaces a {
display: block;
font-family: var(--font-ui);
font-size: 12px;
color: var(--dust);
text-decoration: none;
padding: 6px 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: color 0.3s, border-color 0.3s;
}

#p-namespaces a:hover,
#p-namespaces li.selected a {
color: var(--amber-pale);
border-bottom-color: var(--amber);
}

/* ── Search bar ── */
#p-search {
position: relative;
}

#searchInput {
font-family: var(--font-body);
font-size: 13px;
background: rgba(255,255,255,0.04);
border: var(--border-grain);
border-radius: 2px;
color: var(--bone);
padding: 7px 36px 7px 12px;
width: 220px;
outline: none;
transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
caret-color: var(--amber);
}

#searchInput::placeholder { color: var(--sepia); font-style: italic; }

#searchInput:focus {
border-color: rgba(200,132,58,0.6);
background: rgba(255,255,255,0.07);
box-shadow: 0 0 0 3px rgba(200,132,58,0.1), inset 0 0 20px rgba(200,132,58,0.05);
}

.search-btn {
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
background: none; border: none;
color: var(--amber);
cursor: pointer;
font-size: 14px;
opacity: 0.7;
transition: opacity 0.2s;
}
.search-btn:hover { opacity: 1; }

/* ─────────────────────────────────────────────
SIDEBAR
───────────────────────────────────────────── */
#mw-panel {
background: linear-gradient(180deg, rgba(16,11,7,0.98) 0%, rgba(26,20,12,0.95) 100%);
border-right: var(--border-grain);
padding: 24px 0 40px;
position: relative;
overflow: hidden;
}

/* Vertical amber strip */
#mw-panel::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg,
transparent 0%,
var(--amber-deep) 20%,
var(--amber) 50%,
var(--amber-deep) 80%,
transparent 100%
);
opacity: 0.4;
animation: sidebar-stripe 8s ease-in-out infinite;
}

@keyframes sidebar-stripe {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.6; }
}

/* Sidebar section */
.portal {
margin: 0 0 24px;
padding: 0 20px;
}

.portal h3 {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: var(--border-amber);
position: relative;
}

/* Decorative cross on section headers */
.portal h3::before {
content: '✦';
margin-right: 6px;
font-size: 8px;
opacity: 0.7;
}

.portal ul { list-style: none; }

.portal li {
margin: 2px 0;
}

.portal a {
display: block;
font-family: var(--font-body);
font-size: 13px;
color: var(--sepia-pale);
text-decoration: none;
padding: 5px 8px;
border-radius: 1px;
transition: color 0.25s, background 0.25s, padding-left 0.25s;
border-left: 2px solid transparent;
position: relative;
}

.portal a::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
background: rgba(200,132,58,0.08);
transition: width 0.3s ease;
}

.portal a:hover {
color: var(--amber-pale);
padding-left: 14px;
border-left-color: var(--amber);
}

.portal a:hover::before { width: 100%; }

/* Track list in sidebar — special styling */
.portal.tracklist li {
counter-increment: track;
display: flex;
gap: 8px;
align-items: baseline;
}

.portal.tracklist li::before {
content: counter(track, decimal-leading-zero);
font-family: var(--font-ui);
font-size: 10px;
color: var(--amber-deep);
min-width: 20px;
flex-shrink: 0;
counter-reset: none;
}

.portal.tracklist { counter-reset: track; }

/* ─────────────────────────────────────────────
MAIN CONTENT AREA
───────────────────────────────────────────── */
#content {
padding: 36px 48px 60px 40px;
position: relative;
}

/* ── Page title ── */
#firstHeading {
font-family: var(--font-title);
font-size: clamp(28px, 4vw, 42px);
font-weight: 400;
font-style: italic;
color: var(--amber-pale);
line-height: 1.15;
margin-bottom: 6px;
letter-spacing: 0.02em;
text-shadow: 0 2px 40px rgba(200,132,58,0.3);
animation: title-appear 1.2s ease both;
position: relative;
}

@keyframes title-appear {
from { opacity: 0; transform: translateY(8px); letter-spacing: 0.08em; }
to { opacity: 1; transform: translateY(0); letter-spacing: 0.02em; }
}

/* Decorative rule under title */
.mw-body-content > .page-header {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(139,99,68,0.3);
position: relative;
}

.mw-body-content > .page-header::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 120px;
height: 1px;
background: var(--amber);
animation: underline-grow 1s 0.5s ease both;
}

@keyframes underline-grow {
from { width: 0; opacity: 0; }
to { width: 120px; opacity: 1; }
}

.page-subtitle {
font-family: var(--font-ui);
font-size: 11px;
color: var(--sepia);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-top: 4px;
}

/* ── Body text ── */
.mw-body-content p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.85;
color: var(--bone-dark);
margin-bottom: 1.2em;
animation: para-fade 0.6s ease both;
}

@keyframes para-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}

/* Stagger paragraphs */
.mw-body-content p:nth-child(2) { animation-delay: 0.05s; }
.mw-body-content p:nth-child(3) { animation-delay: 0.1s; }
.mw-body-content p:nth-child(4) { animation-delay: 0.15s; }
.mw-body-content p:nth-child(5) { animation-delay: 0.2s; }

/* ── Headings ── */
.mw-body-content h2 {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 600;
color: var(--amber-pale);
margin: 2.2em 0 0.7em;
padding-bottom: 8px;
border-bottom: var(--border-grain);
position: relative;
}

.mw-body-content h2::before {
content: '§';
color: var(--amber-deep);
margin-right: 8px;
font-style: italic;
}

.mw-body-content h3 {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 400;
font-style: italic;
color: var(--sepia-pale);
margin: 1.8em 0 0.5em;
}

.mw-body-content h4 {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber);
margin: 1.5em 0 0.4em;
}

/* ── Links ── */
.mw-body-content a {
color: var(--amber);
text-decoration: none;
border-bottom: 1px solid rgba(200,132,58,0.3);
transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

.mw-body-content a:hover {
color: var(--amber-pale);
border-bottom-color: var(--amber-pale);
text-shadow: 0 0 20px rgba(200,132,58,0.4);
}

/* ── Infobox / article sidebar ── */
.infobox {
float: right;
clear: right;
margin: 0 0 24px 28px;
width: 240px;
background: rgba(26,20,12,0.9);
border: var(--border-grain);
border-top: 2px solid var(--amber);
font-size: 13px;
animation: infobox-in 0.8s 0.3s ease both;
position: relative;
overflow: hidden;
}

@keyframes infobox-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}

/* Subtle amber corner accent */
.infobox::after {
content: '';
position: absolute;
top: 0; right: 0;
border-left: 16px solid transparent;
border-top: 16px solid var(--amber);
opacity: 0.5;
}

.infobox-title {
font-family: var(--font-heading);
font-size: 14px;
font-style: italic;
text-align: center;
background: rgba(200,132,58,0.12);
color: var(--amber-pale);
padding: 10px 12px;
border-bottom: var(--border-grain);
}

.infobox table { width: 100%; border-collapse: collapse; }
.infobox td {
padding: 6px 12px;
vertical-align: top;
border-bottom: 1px solid rgba(139,99,68,0.15);
}

.infobox td:first-child {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--amber-deep);
white-space: nowrap;
padding-right: 8px;
}

.infobox td:last-child {
color: var(--bone-dark);
font-size: 13px;
}

/* ── Hatnotes / notices ── */
.hatnote {
font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--fog);
background: rgba(106,125,135,0.08);
border-left: 3px solid var(--fog-deep);
padding: 10px 16px;
margin-bottom: 20px;
border-radius: 0 2px 2px 0;
}

/* ── Blockquote / pull quote ── */
.mw-body-content blockquote {
border-left: 3px solid var(--amber);
padding: 12px 20px;
margin: 24px 0;
background: rgba(200,132,58,0.05);
position: relative;
}

.mw-body-content blockquote::before {
content: '\201C';
font-family: var(--font-title);
font-size: 48px;
color: var(--amber-deep);
position: absolute;
top: -8px; left: 12px;
line-height: 1;
opacity: 0.6;
}

.mw-body-content blockquote p {
font-style: italic;
color: var(--sepia-pale);
padding-left: 20px;
}

/* ── Tables ── */
.wikitable {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
font-size: 13px;
background: rgba(26,20,12,0.6);
border: var(--border-grain);
animation: table-in 0.6s ease both;
}

@keyframes table-in {
from { opacity: 0; }
to { opacity: 1; }
}

.wikitable th {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
background: rgba(200,132,58,0.12);
color: var(--amber);
padding: 10px 14px;
border: var(--border-grain);
text-align: left;
}

.wikitable td {
color: var(--bone-dark);
padding: 8px 14px;
border: 1px solid rgba(139,99,68,0.2);
line-height: 1.6;
}

.wikitable tr:hover td {
background: rgba(200,132,58,0.05);
}

/* Track numbers in table */
.wikitable td.track-num {
font-family: var(--font-ui);
font-size: 11px;
color: var(--amber-deep);
text-align: center;
width: 40px;
}

/* ── Categories ── */
#catlinks {
margin-top: 40px;
padding-top: 16px;
border-top: var(--border-grain);
font-size: 12px;
}

#catlinks h2 {
display: inline;
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber-deep);
border-bottom: none;
margin: 0 8px 0 0;
font-weight: normal;
}

#catlinks h2::before { display: none; }

#catlinks a {
color: var(--sepia);
border-bottom: 1px solid rgba(139,99,68,0.2);
margin: 0 4px;
font-size: 12px;
}

#catlinks a:hover { color: var(--amber-pale); }

/* ── Edit toolbar / page actions ── */
#p-views {
display: flex;
gap: 0;
align-items: center;
}

#p-views li { list-style: none; }

#p-views a {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sepia);
text-decoration: none;
padding: 8px 12px;
display: block;
transition: color 0.2s, background 0.2s;
border-left: 1px solid rgba(139,99,68,0.15);
}

#p-views a:hover {
color: var(--amber-pale);
background: rgba(200,132,58,0.08);
}

#p-views li.selected a {
color: var(--amber);
}

/* ─────────────────────────────────────────────
FOOTER
───────────────────────────────────────────── */
#footer {
grid-column: 1 / -1;
padding: 20px 28px;
border-top: var(--border-grain);
background: rgba(10,8,6,0.95);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}

.footer-links {
display: flex;
gap: 0;
list-style: none;
flex-wrap: wrap;
}

.footer-links a {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sepia-dark);
text-decoration: none;
padding: 0 10px;
border-right: 1px solid rgba(139,99,68,0.2);
transition: color 0.2s;
}

.footer-links li:last-child a { border-right: none; }
.footer-links a:hover { color: var(--amber); }

.footer-copy {
font-family: var(--font-body);
font-size: 11px;
font-style: italic;
color: var(--sepia-dark);
}

/* ─────────────────────────────────────────────
TIMELESS SKIN COMPATIBILITY OVERRIDES
(Timeless uses these selectors)
───────────────────────────────────────────── */
.mw-header { display: contents; }
.mw-body { display: contents; }
.content-container { display: contents; }
.sidebar-chunk { margin-bottom: 20px; }

/* Timeless search form */
#searchform { display: flex; align-items: center; gap: 0; }
#searchform button[type="submit"] {
background: rgba(200,132,58,0.15);
border: var(--border-grain);
border-left: none;
color: var(--amber);
padding: 7px 10px;
cursor: pointer;
font-size: 13px;
transition: background 0.2s;
}
#searchform button[type="submit"]:hover { background: rgba(200,132,58,0.25); }

/* ─────────────────────────────────────────────
JS-POWERED EFFECTS
───────────────────────────────────────────── */

/* Cursor trail dot */
.cursor-dot {
position: fixed;
width: 6px; height: 6px;
background: var(--amber);
border-radius: 50%;
pointer-events: none;
z-index: 10000;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.3s;
box-shadow: 0 0 12px 3px rgba(200,132,58,0.4);
}

/* Static for demo below */
.cursor-ring {
position: fixed;
width: 28px; height: 28px;
border: 1px solid rgba(200,132,58,0.4);
border-radius: 50%;
pointer-events: none;
z-index: 10000;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.5s, width 0.2s, height 0.2s, border-color 0.2s;
}

/* Dust particle canvas */
#dust-canvas {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.35;
}

/* Page load vignette */
.vignette {
position: fixed;
inset: 0;
z-index: 9997;
background: radial-gradient(ellipse at center, transparent 50%, rgba(10,8,6,0.7) 100%);
pointer-events: none;
}

/* Flicker animation for the whole page on load */
@keyframes vhs-flicker {
0% { opacity: 0; }
5% { opacity: 0.9; }
6% { opacity: 0.3; }
8% { opacity: 1; }
100% { opacity: 1; }
}

#mw-wrapper { animation: vhs-flicker 1.4s ease both; }

/* Link hover glow pulse */
@keyframes link-glow {
0% { text-shadow: 0 0 8px rgba(200,132,58,0.3); }
50% { text-shadow: 0 0 20px rgba(200,132,58,0.6), 0 0 40px rgba(200,132,58,0.2); }
100% { text-shadow: 0 0 8px rgba(200,132,58,0.3); }
}

.mw-body-content a:hover { animation: link-glow 1.5s ease-in-out infinite; }

/* ── Scroll-reveal ── */
.scroll-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
}

/* ── Static noise flicker on hover for headings ── */
.mw-body-content h2:hover {
animation: text-static 0.15s steps(2) 3;
}

@keyframes text-static {
0% { letter-spacing: 0.01em; opacity: 0.8; }
50% { letter-spacing: 0.04em; opacity: 1; }
100% { letter-spacing: 0.01em; opacity: 0.8; }
}

/* ── Typewriter cursor on search ── */
#searchInput:focus::placeholder {
animation: type-cursor 0.8s steps(1) infinite;
}
@keyframes type-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

/* ── Ripple on sidebar link click ── */
.portal a {
overflow: hidden;
}

/* ── Loading bar (amber progress) ── */
#loading-bar {
position: fixed;
top: 0; left: 0;
height: 2px;
background: linear-gradient(90deg, var(--amber-deep), var(--amber), var(--amber-pale));
z-index: 99999;
width: 0%;
transition: width 0.4s ease;
box-shadow: 0 0 8px rgba(200,132,58,0.6);
}

/* ─────────────────────────────────────────────
DEMO PAGE CHROME
(for preview only — not part of actual skin)
───────────────────────────────────────────── */
.demo-label {
position: fixed;
bottom: 20px; right: 20px;
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber-deep);
z-index: 9990;
opacity: 0.6;
}

MediaWiki:Common.js

2026-04-16T05:05:35Z

King of the colours: Created page with "/** * ============================================================= * PREACHER'S DAUGHTER — MediaWiki Wiki Theme JS * Based on the 2022 album by Ethel Cain * Southern Gothic · Dark Americana · Sacred & Profane * ============================================================= * Install: Paste into MediaWiki:Common.js * Requires: PreachersDaughter.css (MediaWiki:Common.css) * ============================================================= */ ( function () {..."

/**
* =============================================================
* PREACHER'S DAUGHTER — MediaWiki Wiki Theme JS
* Based on the 2022 album by Ethel Cain
* Southern Gothic · Dark Americana · Sacred & Profane
* =============================================================
* Install: Paste into MediaWiki:Common.js
* Requires: PreachersDaughter.css (MediaWiki:Common.css)
* =============================================================
*/

( function () {
'use strict';

/* ── CONFIG ─────────────────────────────────────────────── */
var CFG = {
dust: {
enabled: true,
count: 28, /* live particles on screen */
minSize: 1, /* px */
maxSize: 3.5, /* px */
minSpeed: 0.18, /* px / frame */
maxSpeed: 0.55,
minDrift: -0.25, /* horizontal drift px/frame */
maxDrift: 0.35,
colors: ['rgba(224,200,160,{a})', 'rgba(160,80,80,{a})', 'rgba(255,240,210,{a})']
},
flicker: {
enabled: true,
heading: true, /* animate page heading */
interval: [4000, 14000] /* random ms between flickers */
},
reveal: {
enabled: true,
rootMargin: '0px 0px -60px 0px'
},
watermark: {
enabled: true,
char: '✝'
},
candle: {
enabled: true /* ambient glow pulse on toc/sidebar */
},
typewriter: {
enabled: false /* set true to typewrite the main heading */
}
};

/* ── UTILITY ─────────────────────────────────────────────── */
function rand( min, max ) { return Math.random() * ( max - min ) + min; }
function randInt( min, max ) { return Math.floor( rand( min, max + 1 ) ); }
function qs( sel, ctx ) { return ( ctx || document ).querySelector( sel ); }
function qsa( sel, ctx ) { return Array.from( ( ctx || document ).querySelectorAll( sel ) ); }

/* ── 1. WATERMARK CROSS ──────────────────────────────────── */
function initWatermark() {
if ( !CFG.watermark.enabled ) return;
var el = document.createElement( 'div' );
el.id = 'pd-watermark';
el.setAttribute( 'aria-hidden', 'true' );
el.textContent = CFG.watermark.char;
document.body.appendChild( el );
}

/* ── 2. DUST / ASH PARTICLE SYSTEM ──────────────────────── */
function initDust() {
if ( !CFG.dust.enabled ) return;

var canvas = document.createElement( 'canvas' );
canvas.id = 'pd-dust-canvas';
canvas.setAttribute( 'aria-hidden', 'true' );
document.body.appendChild( canvas );

var ctx = canvas.getContext( '2d' );
var W, H;
var particles = [];

function resize() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
}
window.addEventListener( 'resize', resize, { passive: true } );
resize();

function makeParticle( initial ) {
var colorTpl = CFG.dust.colors[ randInt( 0, CFG.dust.colors.length - 1 ) ];
var alpha = rand( 0.25, 0.75 );
var color = colorTpl.replace( '{a}', alpha.toFixed( 2 ) );
return {
x: rand( 0, W ),
y: initial ? rand( 0, H ) : rand( -20, -2 ),
r: rand( CFG.dust.minSize, CFG.dust.maxSize ),
vy: rand( CFG.dust.minSpeed, CFG.dust.maxSpeed ),
vx: rand( CFG.dust.minDrift, CFG.dust.maxDrift ),
alpha: alpha,
color: color,
rot: rand( 0, Math.PI * 2 ),
rspd: rand( -0.01, 0.01 )
};
}

for ( var i = 0; i < CFG.dust.count; i++ ) {
particles.push( makeParticle( true ) );
}

function draw() {
ctx.clearRect( 0, 0, W, H );

particles.forEach( function ( p, idx ) {
p.y += p.vy;
p.x += p.vx + Math.sin( p.y * 0.008 + idx ) * 0.18;
p.rot += p.rspd;

if ( p.y > H + 10 ) {
particles[ idx ] = makeParticle( false );
return;
}

ctx.save();
ctx.translate( p.x, p.y );
ctx.rotate( p.rot );
ctx.fillStyle = p.color;
ctx.beginPath();
/* small elongated flake */
ctx.ellipse( 0, 0, p.r * 0.55, p.r, 0, 0, Math.PI * 2 );
ctx.fill();
ctx.restore();
} );

requestAnimationFrame( draw );
}

requestAnimationFrame( draw );
}

/* ── 3. CANDLE FLICKER (heading glow) ────────────────────── */
function initFlicker() {
if ( !CFG.flicker.enabled || !CFG.flicker.heading ) return;

var heading = qs( '#firstHeading, .mw-first-heading, .page-header h1' );
if ( !heading ) return;

heading.classList.add( 'pd-flicker' );

/* Random additional intensity bursts */
function scheduleBurst() {
var delay = rand( CFG.flicker.interval[0], CFG.flicker.interval[1] );
setTimeout( function () {
heading.style.transition = 'text-shadow 0.05s ease';
heading.style.textShadow =
'0 0 50px rgba(200,50,50,0.75), 0 0 10px rgba(255,160,100,0.3), 0 2px 4px rgba(0,0,0,.9)';
setTimeout( function () {
heading.style.textShadow = '';
heading.style.transition = '';
scheduleBurst();
}, rand( 60, 180 ) );
}, delay );
}
scheduleBurst();
}

/* ── 4. SCROLL REVEAL ────────────────────────────────────── */
function initReveal() {
if ( !CFG.reveal.enabled ) return;
if ( typeof IntersectionObserver === 'undefined' ) return;

var targets = qsa(
'.mw-body-content h2, .mw-body-content h3, ' +
'.mw-body-content p, .mw-body-content .thumb, ' +
'.mw-body-content table, .mw-body-content blockquote, ' +
'.mw-body-content ul, .mw-body-content ol'
);

var seen = new Set();

var obs = new IntersectionObserver( function ( entries ) {
entries.forEach( function ( entry ) {
if ( entry.isIntersecting && !seen.has( entry.target ) ) {
seen.add( entry.target );
entry.target.classList.add( 'pd-reveal' );
obs.unobserve( entry.target );
}
} );
}, { rootMargin: CFG.reveal.rootMargin } );

/* Pre-set opacity so reveal is visible */
targets.forEach( function ( el ) {
if ( el.getBoundingClientRect().top > window.innerHeight * 0.3 ) {
el.style.opacity = '0';
obs.observe( el );
}
} );
}

/* ── 5. CANDLE AMBIENT PULSE ─────────────────────────────── */
function initCandlePulse() {
if ( !CFG.candle.enabled ) return;

var targets = qsa( '#toc, .toc, .infobox, table.infobox, #content, .mw-body' );
targets.forEach( function ( el ) {
el.classList.add( 'pd-pulse-border' );
} );
}

/* ── 6. ORNATE SECTION DIVIDERS ──────────────────────────── */
function initDividers() {
/* Insert a decorative vine divider after every h2 */
var ornament = '<span class="pd-ornament" aria-hidden="true" ' +
'style="display:block;text-align:center;font-size:0.75rem;' +
'color:rgba(122,28,36,0.45);letter-spacing:0.6em;' +
'margin:-0.2rem 0 0.8rem;font-family:serif;">' +
'— ✦ —' +
'</span>';

qsa( '.mw-body-content h2' ).forEach( function ( h ) {
h.insertAdjacentHTML( 'afterend', ornament );
} );
}

/* ── 7. TYPEWRITER HEADING (opt-in) ──────────────────────── */
function initTypewriter() {
if ( !CFG.typewriter.enabled ) return;

var heading = qs( '#firstHeading, .mw-first-heading' );
if ( !heading ) return;

var originalText = heading.textContent.trim();
heading.textContent = '';
heading.style.opacity = '1';

var i = 0;
var cursor = document.createElement( 'span' );
cursor.textContent = '|';
cursor.style.cssText =
'color:rgba(160,43,55,0.8);animation:pd-flickerB 1.1s ease-in-out infinite;';
heading.appendChild( cursor );

var interval = setInterval( function () {
if ( i < originalText.length ) {
cursor.insertAdjacentText( 'beforebegin', originalText.charAt( i ) );
i++;
} else {
clearInterval( interval );
setTimeout( function () { cursor.remove(); }, 600 );
}
}, 55 );
}

/* ── 8. LINK HOVER SOUND (optional — disabled by default) ── */
/*
function initHoverSound() {
// Uncomment if you want subtle audio on link hover
// Requires AudioContext support
qsa( 'a' ).forEach( function ( a ) {
a.addEventListener( 'mouseenter', function () {
try {
var ctx = new AudioContext();
var osc = ctx.createOscillator();
var gain = ctx.createGain();
osc.connect( gain );
gain.connect( ctx.destination );
osc.frequency.value = 220;
gain.gain.setValueAtTime( 0.04, ctx.currentTime );
gain.gain.exponentialRampToValueAtTime( 0.0001, ctx.currentTime + 0.25 );
osc.start();
osc.stop( ctx.currentTime + 0.25 );
} catch ( e ) {}
} );
} );
}
*/

/* ── 9. REDLINK STYLING ──────────────────────────────────── */
function styleRedlinks() {
qsa( 'a.new' ).forEach( function ( a ) {
a.title = ( a.title || '' ) + ' [page not yet written]';
} );
}

/* ── 10. SIDEBAR SECTION COLLAPSE ANIMATION ──────────────── */
function initSidebarAnimations() {
qsa( '#mw-panel .portal, .vector-menu' ).forEach( function ( portal, idx ) {
portal.style.opacity = '0';
portal.style.transform = 'translateX(-8px)';
portal.style.transition =
'opacity 0.5s ease ' + ( idx * 0.08 ) + 's, ' +
'transform 0.5s ease ' + ( idx * 0.08 ) + 's';
/* Trigger reflow then animate in */
setTimeout( function () {
portal.style.opacity = '1';
portal.style.transform = 'translateX(0)';
}, 80 );
} );
}

/* ── 11. TABLE ROW STAGGER ───────────────────────────────── */
function initTableStagger() {
qsa( '.wikitable tr' ).forEach( function ( tr, idx ) {
tr.style.opacity = '0';
tr.style.transition = 'opacity 0.4s ease ' + ( idx * 0.04 ) + 's';
setTimeout( function () {
tr.style.opacity = '1';
}, 200 + idx * 40 );
} );
}

/* ── 12. CROSS CURSOR TRAIL ──────────────────────────────── */
function initCursorTrail() {
/* Subtle: drops tiny crimson sparks on fast mouse move */
var lastX = 0, lastY = 0, moving = false, timer;

document.addEventListener( 'mousemove', function ( e ) {
var dx = e.clientX - lastX;
var dy = e.clientY - lastY;
var dist = Math.sqrt( dx * dx + dy * dy );

if ( dist < 12 ) return; /* only on fast moves */

lastX = e.clientX;
lastY = e.clientY;

var spark = document.createElement( 'div' );
spark.setAttribute( 'aria-hidden', 'true' );
spark.style.cssText =
'position:fixed;' +
'left:' + e.clientX + 'px;' +
'top:' + e.clientY + 'px;' +
'width:4px;height:4px;' +
'border-radius:50%;' +
'background:rgba(160,43,55,0.7);' +
'pointer-events:none;' +
'z-index:99999;' +
'transform:translate(-50%,-50%);' +
'transition:opacity 0.6s ease, transform 0.6s ease;';

document.body.appendChild( spark );

/* Animate out */
requestAnimationFrame( function () {
spark.style.opacity = '0';
spark.style.transform =
'translate(-50%,-50%) translateY(' + rand( -12, -30 ) + 'px) scale(0.3)';
} );

setTimeout( function () {
if ( spark.parentNode ) spark.parentNode.removeChild( spark );
}, 650 );
}, { passive: true } );
}

/* ── 13. PAGE TRANSITION OVERLAY ─────────────────────────── */
function initPageTransition() {
/* Fade-out on navigation */
var overlay = document.createElement( 'div' );
overlay.setAttribute( 'aria-hidden', 'true' );
overlay.style.cssText =
'position:fixed;inset:0;' +
'background:#0e0a09;' +
'opacity:0;pointer-events:none;' +
'z-index:99997;' +
'transition:opacity 0.3s ease;';
document.body.appendChild( overlay );

/* Fade in (we arrive on a new page) */
document.body.style.opacity = '0';
document.body.style.transition = 'opacity 0.6s ease';
requestAnimationFrame( function () {
document.body.style.opacity = '1';
} );

/* Fade out before leaving */
document.addEventListener( 'click', function ( e ) {
var a = e.target.closest( 'a' );
if ( !a || !a.href || a.target === '_blank' ||
a.href.startsWith( '#' ) || a.href.startsWith( 'javascript' ) ) return;
/* Skip edit/action links */
if ( /[?&]action=/.test( a.href ) && !/action=view/.test( a.href ) ) return;

overlay.style.pointerEvents = 'all';
overlay.style.opacity = '1';
} );
}

/* ── 14. QUOTE PULL — RANDOM TRACK EPIGRAPH ──────────────── */
var EPIGRAPHS = [
'"I was baptized but I still die." — Family Tree',
'"God only listens to the men around here." — Gibson Girl',
'"Nothing happened here except everything." — Thoroughfare',
'"Hallelujah, hallelujah, come back to me." — Strangers',
'"Sometimes I swear I can still hear the choir." — Hard Road',
'"Do not mistake her softness for surrender." — American Teenager'
];

function initEpigraph() {
var sidebar = qs( '#mw-panel, .vector-sidebar-toc-container, #vector-toc-collapsed-button' );
if ( !sidebar ) return;

var quote = EPIGRAPHS[ randInt( 0, EPIGRAPHS.length - 1 ) ];

var el = document.createElement( 'div' );
el.setAttribute( 'aria-label', 'Album epigraph' );
el.style.cssText =
'margin: 1.5rem 0.8rem;' +
'padding: 0.8rem 1rem;' +
'border-left: 2px solid rgba(122,28,36,0.5);' +
'font-family: "IM Fell English", Georgia, serif;' +
'font-style: italic;' +
'font-size: 0.82rem;' +
'color: rgba(158,139,114,0.8);' +
'line-height: 1.6;';
el.textContent = quote;

sidebar.appendChild( el );
}

/* ── INIT — run after DOM ready ──────────────────────────── */
function main() {
initWatermark();
initDust();
initFlicker();
initReveal();
initCandlePulse();
initDividers();
initTypewriter();
styleRedlinks();
initSidebarAnimations();
initTableStagger();
initCursorTrail();
initPageTransition();
initEpigraph();

/* Mark body so CSS can scope theme selectors */
document.documentElement.classList.add( 'pd-theme' );

/* Console signature */
console.log(
'%c✝ Preacher\'s Daughter Wiki Theme%c\n' +
' Ethel Cain · 2022 · Southern Gothic\n' +
' "God is a place you will wait for the rest of your life."',
'color:#c03040;font-size:14px;font-weight:bold;',
'color:#9e8b72;font-size:11px;'
);
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', main );
} else {
main();
}

} )();

MediaWiki:Common.css

2026-04-16T05:05:13Z

King of the colours: Created page with "/* ============================================================= PREACHER'S DAUGHTER — MediaWiki Wiki Theme Based on the 2022 album by Ethel Cain Southern Gothic · Dark Americana · Sacred & Profane ============================================================= Install: Paste into MediaWiki:Common.css Pair with: MediaWiki:Common.js (see companion file) ============================================================= */ /* ── 0. GOOGLE FONTS IMPORT ───..."

/*
=============================================================
PREACHER'S DAUGHTER — MediaWiki Wiki Theme
Based on the 2022 album by Ethel Cain
Southern Gothic · Dark Americana · Sacred & Profane
=============================================================
Install: Paste into MediaWiki:Common.css
Pair with: MediaWiki:Common.js (see companion file)
=============================================================
*/

/* ── 0. GOOGLE FONTS IMPORT ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel+Decorative:wght@400;700&display=swap');

/* ── 1. ROOT VARIABLES ───────────────────────────────────── */
:root {
--pd-bg: #0e0a09;
--pd-bg-alt: #150f0d;
--pd-bg-content: #1a1210;
--pd-bg-sidebar: #110c0b;
--pd-bg-header: #0a0706;

--pd-text: #e8d9c0;
--pd-text-muted: #9e8b72;
--pd-text-faint: #5c4d3c;

--pd-crimson: #7a1c24;
--pd-crimson-lt: #a82b37;
--pd-crimson-glow:#c0304050;
--pd-rose: #b07080;
--pd-rose-lt: #d09090;
--pd-gold: #b08050;
--pd-gold-lt: #d4a060;
--pd-bone: #f0e8d5;
--pd-ivory: #fdf8f0;

--pd-border: #3a2818;
--pd-border-lt: #5a3c22;

--pd-font-display: 'Cinzel Decorative', 'Cinzel', serif;
--pd-font-heading: 'IM Fell English', 'Georgia', serif;
--pd-font-body: 'EB Garamond', 'Georgia', serif;
--pd-font-cinzel: 'Cinzel', serif;
--pd-font-ui: 'EB Garamond', serif;

--pd-shadow-deep: 0 8px 32px rgba(0,0,0,0.8);
--pd-shadow-crimson: 0 0 18px rgba(122,28,36,0.35);
--pd-glow-link: 0 0 8px rgba(160,43,55,0.5);
--pd-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. BASE RESET & BODY ────────────────────────────────── */
html, body {
background-color: var(--pd-bg) !important;
color: var(--pd-text) !important;
font-family: var(--pd-font-body) !important;
font-size: 18px !important;
line-height: 1.75 !important;
-webkit-font-smoothing: antialiased;
}

/* Aged parchment texture using CSS alone — horizontal grain */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255,240,200,0.012) 2px,
rgba(255,240,200,0.012) 4px
);
pointer-events: none;
z-index: 9998;
}

/* ── 3. PAGE LAYOUT WRAPPERS ─────────────────────────────── */
#mw-page-base {
background-color: var(--pd-bg-header) !important;
background-image: linear-gradient(180deg, #050303 0%, var(--pd-bg-alt) 100%) !important;
}

#mw-head-base {
background-color: var(--pd-bg-header) !important;
}

#content,
.mw-body {
background-color: var(--pd-bg-content) !important;
color: var(--pd-text) !important;
border: 1px solid var(--pd-border) !important;
border-top: 2px solid var(--pd-crimson) !important;
box-shadow: var(--pd-shadow-deep) !important;
padding: 2rem 2.5rem !important;
}

/* Vignette border — gives content depth */
.mw-body::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 80px rgba(0,0,0,0.45);
}

/* ── 4. SIDEBAR ──────────────────────────────────────────── */
#mw-panel,
.vector-sidebar,
.mw-sidebar,
#mw-navigation,
.collapsible-nav {
background-color: var(--pd-bg-sidebar) !important;
border-right: 1px solid var(--pd-border) !important;
}

/* ── 5. LOGO ─────────────────────────────────────────────── */
#p-logo a {
display: block;
filter: drop-shadow(0 0 12px rgba(122,28,36,0.6));
transition: filter var(--pd-transition);
}
#p-logo a:hover {
filter: drop-shadow(0 0 22px rgba(160,43,55,0.85));
}

/* ── 6. SITE TITLE & HEADER ──────────────────────────────── */
#firstHeading,
.mw-first-heading,
.page-header h1 {
font-family: var(--pd-font-display) !important;
font-size: 2.2rem !important;
font-weight: 700 !important;
color: var(--pd-bone) !important;
letter-spacing: 0.06em !important;
text-shadow:
0 0 30px rgba(160,43,55,0.4),
0 2px 4px rgba(0,0,0,0.8) !important;
border-bottom: 1px solid var(--pd-border) !important;
padding-bottom: 0.6rem !important;
margin-bottom: 1.4rem !important;
animation: pd-fadein 1.2s ease forwards;
}

/* ── 7. HEADINGS ─────────────────────────────────────────── */
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
font-family: var(--pd-font-heading) !important;
font-style: italic;
color: var(--pd-bone) !important;
letter-spacing: 0.03em;
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
margin-top: 1.8em !important;
margin-bottom: 0.5em !important;
}

.mw-body-content h2 {
font-size: 1.6rem !important;
border-bottom: 1px solid var(--pd-border-lt) !important;
padding-bottom: 0.3rem !important;
position: relative;
}

/* Cross ornament before h2 */
.mw-body-content h2 .mw-headline::before {
content: '✝';
font-style: normal;
font-family: serif;
color: var(--pd-crimson-lt);
margin-right: 0.5em;
font-size: 0.75em;
vertical-align: middle;
opacity: 0.75;
}

.mw-body-content h3 {
font-size: 1.28rem !important;
color: var(--pd-text) !important;
}

.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
font-family: var(--pd-font-cinzel) !important;
font-style: normal !important;
font-size: 1rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--pd-text-muted) !important;
}

/* ── 8. BODY TEXT ────────────────────────────────────────── */
.mw-body-content p,
.mw-body-content li,
.mw-body-content dd,
.mw-body-content dt {
font-family: var(--pd-font-body) !important;
font-size: 1rem !important;
line-height: 1.8 !important;
color: var(--pd-text) !important;
}

/* Opening paragraph drop-cap */
.mw-body-content > p:first-of-type::first-letter {
font-family: var(--pd-font-cinzel) !important;
font-size: 4.2em !important;
line-height: 0.75;
float: left;
margin: 0.05em 0.12em 0 0;
color: var(--pd-crimson-lt);
text-shadow: 0 0 20px rgba(160,43,55,0.5);
font-weight: 700;
}

/* ── 9. LINKS ────────────────────────────────────────────── */
a,
a:visited {
color: var(--pd-rose) !important;
text-decoration: none !important;
border-bottom: 1px solid transparent;
transition:
color var(--pd-transition),
border-color var(--pd-transition),
text-shadow var(--pd-transition) !important;
}

a:hover {
color: var(--pd-rose-lt) !important;
border-bottom-color: var(--pd-crimson-lt) !important;
text-shadow: var(--pd-glow-link) !important;
}

a.new,
a.new:visited {
color: var(--pd-crimson-lt) !important;
}

/* ── 10. NAVIGATION MENUS ────────────────────────────────── */
/* Sidebar nav links */
#mw-panel .portal,
.vector-menu-content,
.sidebar-toc {
border: none !important;
background: transparent !important;
}

#mw-panel .portal h3,
.vector-menu-heading {
font-family: var(--pd-font-cinzel) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--pd-crimson-lt) !important;
border-bottom: 1px solid var(--pd-border) !important;
padding-bottom: 0.3rem !important;
margin: 1rem 0 0.4rem !important;
}

#mw-panel .portal ul li a,
.vector-menu-content li a {
font-family: var(--pd-font-body) !important;
font-size: 0.9rem !important;
color: var(--pd-text-muted) !important;
padding: 0.15rem 0 !important;
transition: color var(--pd-transition), padding-left var(--pd-transition) !important;
display: block !important;
}

#mw-panel .portal ul li a:hover,
.vector-menu-content li a:hover {
color: var(--pd-rose-lt) !important;
padding-left: 0.5rem !important;
border-bottom: none !important;
text-shadow: none !important;
}

/* ── 11. TOP NAVIGATION BAR ──────────────────────────────── */
#mw-head,
.vector-header,
#vector-page-toolbar,
.vector-page-toolbar {
background-color: var(--pd-bg-header) !important;
border-bottom: 1px solid var(--pd-border) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
}

/* Tabs (read/edit/history) */
#p-views .selected a,
#p-views li.selected a {
background-color: var(--pd-bg-content) !important;
color: var(--pd-bone) !important;
border-color: var(--pd-border-lt) var(--pd-border-lt) transparent !important;
}

#p-views li a {
background-color: var(--pd-bg-sidebar) !important;
color: var(--pd-text-muted) !important;
border: 1px solid var(--pd-border) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.78rem !important;
letter-spacing: 0.08em !important;
transition: background-color var(--pd-transition), color var(--pd-transition) !important;
}

#p-views li a:hover {
background-color: var(--pd-crimson) !important;
color: var(--pd-bone) !important;
border-color: var(--pd-crimson) !important;
border-bottom: none !important;
text-shadow: none !important;
}

/* Search box */
#searchInput,
#searchform input[type="search"],
input#searchInput {
background-color: #100b0a !important;
color: var(--pd-text) !important;
border: 1px solid var(--pd-border-lt) !important;
font-family: var(--pd-font-body) !important;
font-size: 0.95rem !important;
padding: 0.35rem 0.7rem !important;
border-radius: 2px !important;
transition: border-color var(--pd-transition), box-shadow var(--pd-transition) !important;
}

#searchInput:focus {
border-color: var(--pd-crimson-lt) !important;
box-shadow: 0 0 0 2px rgba(122,28,36,0.3) !important;
outline: none !important;
}

#searchButton, button.searchButton {
background-color: var(--pd-crimson) !important;
color: var(--pd-bone) !important;
border: 1px solid var(--pd-crimson-lt) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.75rem !important;
letter-spacing: 0.1em !important;
cursor: pointer !important;
transition: background-color var(--pd-transition) !important;
}

#searchButton:hover {
background-color: var(--pd-crimson-lt) !important;
}

/* ── 12. TABLE OF CONTENTS ───────────────────────────────── */
#toc,
.toc {
background-color: rgba(14,10,9,0.7) !important;
border: 1px solid var(--pd-border-lt) !important;
border-top: 2px solid var(--pd-crimson) !important;
padding: 1rem 1.4rem !important;
font-family: var(--pd-font-body) !important;
box-shadow: var(--pd-shadow-deep) !important;
}

#toc .toctitle h2,
.toc .toctitle h2 {
font-family: var(--pd-font-cinzel) !important;
font-size: 0.8rem !important;
font-style: normal !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: var(--pd-crimson-lt) !important;
border-bottom: none !important;
}

#toc .toctitle h2::before { content: '' !important; }

.toc ul { margin: 0 !important; }

.toc li a {
color: var(--pd-text-muted) !important;
font-size: 0.9rem !important;
border-bottom: none !important;
}

.toc li a:hover {
color: var(--pd-rose) !important;
text-shadow: none !important;
}

.toc .tocnumber {
color: var(--pd-crimson-lt) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.8rem !important;
}

/* ── 13. TABLES ──────────────────────────────────────────── */
.wikitable,
.mw-body-content table.wikitable {
background-color: var(--pd-bg-alt) !important;
border: 1px solid var(--pd-border-lt) !important;
border-collapse: collapse !important;
color: var(--pd-text) !important;
box-shadow: var(--pd-shadow-deep) !important;
font-family: var(--pd-font-body) !important;
}

.wikitable th {
background-color: #1e1210 !important;
color: var(--pd-bone) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.8rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border: 1px solid var(--pd-border-lt) !important;
padding: 0.6rem 1rem !important;
border-top: 2px solid var(--pd-crimson) !important;
}

.wikitable td {
border: 1px solid var(--pd-border) !important;
padding: 0.5rem 0.9rem !important;
}

.wikitable tr:hover td {
background-color: rgba(122,28,36,0.08) !important;
transition: background-color 0.2s ease !important;
}

/* ── 14. BLOCKQUOTES ─────────────────────────────────────── */
blockquote,
.mw-body-content blockquote {
border-left: 3px solid var(--pd-crimson-lt) !important;
background-color: rgba(10,7,6,0.6) !important;
color: var(--pd-text-muted) !important;
font-family: var(--pd-font-heading) !important;
font-style: italic !important;
font-size: 1.1rem !important;
padding: 0.8rem 1.5rem !important;
margin: 1.5rem 0 !important;
position: relative;
}

blockquote::before {
content: '\201C';
font-family: var(--pd-font-display) !important;
font-size: 4rem;
color: var(--pd-crimson);
position: absolute;
top: -0.5rem;
left: 0.5rem;
line-height: 1;
opacity: 0.4;
}

/* ── 15. CATEGORIES ──────────────────────────────────────── */
#catlinks {
background-color: var(--pd-bg-sidebar) !important;
border: 1px solid var(--pd-border) !important;
border-top: 1px solid var(--pd-border-lt) !important;
color: var(--pd-text-muted) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.78rem !important;
letter-spacing: 0.06em !important;
padding: 0.5rem 1rem !important;
margin-top: 1.5rem !important;
}

#catlinks a {
color: var(--pd-text-muted) !important;
}

#catlinks a:hover {
color: var(--pd-rose) !important;
}

/* ── 16. FOOTER ──────────────────────────────────────────── */
#footer {
background-color: var(--pd-bg) !important;
border-top: 1px solid var(--pd-border) !important;
color: var(--pd-text-faint) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.72rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 1.2rem 2rem !important;
}

#footer a {
color: var(--pd-text-faint) !important;
border-bottom: none !important;
}

#footer a:hover {
color: var(--pd-text-muted) !important;
text-shadow: none !important;
}

#footer-icons { opacity: 0.4; filter: grayscale(1); }

/* ── 17. EDIT BUTTONS & SECTION EDIT ────────────────────── */
.mw-editsection a,
.mw-editsection-bracket {
color: var(--pd-text-faint) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.65rem !important;
letter-spacing: 0.1em !important;
border-bottom: none !important;
}

.mw-editsection a:hover {
color: var(--pd-rose) !important;
text-shadow: none !important;
}

/* ── 18. INFOBOXES ───────────────────────────────────────── */
.infobox,
table.infobox {
background-color: #120e0c !important;
border: 1px solid var(--pd-border-lt) !important;
border-top: 3px solid var(--pd-crimson) !important;
color: var(--pd-text) !important;
font-family: var(--pd-font-body) !important;
box-shadow: var(--pd-shadow-deep) !important;
}

.infobox th,
table.infobox th {
background-color: #1a1010 !important;
color: var(--pd-rose-lt) !important;
font-family: var(--pd-font-cinzel) !important;
font-size: 0.78rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}

.infobox caption,
table.infobox caption {
font-family: var(--pd-font-display) !important;
color: var(--pd-bone) !important;
font-size: 1.05rem !important;
padding: 0.5rem !important;
}

/* ── 19. MESSAGE BOXES (warning, notice, etc.) ───────────── */
.mbox-text,
.ambox td,
.tmbox td {
font-family: var(--pd-font-body) !important;
color: var(--pd-text-muted) !important;
}

.ambox,
.tmbox,
.cmbox {
background-color: #0f0b0a !important;
border: 1px solid var(--pd-border-lt) !important;
border-left: 4px solid var(--pd-crimson) !important;
}

/* ── 20. CODE & PRE ──────────────────────────────────────── */
code, pre, .mw-code {
background-color: #0a0706 !important;
color: var(--pd-rose-lt) !important;
border: 1px solid var(--pd-border) !important;
font-family: 'Courier New', monospace !important;
font-size: 0.85rem !important;
border-radius: 2px !important;
}

/* ── 21. SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

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

::-webkit-scrollbar-thumb {
background: var(--pd-border-lt);
border-radius: 0;
}

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

/* ── 22. TEXT SELECTION ──────────────────────────────────── */
::selection {
background-color: rgba(122,28,36,0.45) !important;
color: var(--pd-bone) !important;
}

/* ── 23. HORIZONTAL RULES ────────────────────────────────── */
hr, .mw-body-content hr {
border: none !important;
border-top: 1px solid var(--pd-border-lt) !important;
margin: 2rem 0 !important;
position: relative;
}

hr::after {
content: '✦ ✝ ✦';
display: block;
text-align: center;
color: var(--pd-crimson-lt);
font-size: 0.7rem;
margin-top: -0.65rem;
background: var(--pd-bg-content);
width: 6rem;
margin-left: auto;
margin-right: auto;
letter-spacing: 0.4em;
}

/* ── 24. IMAGE CAPTIONS ──────────────────────────────────── */
.mw-body-content .thumbcaption,
.thumbcaption {
color: var(--pd-text-muted) !important;
font-family: var(--pd-font-heading) !important;
font-style: italic !important;
font-size: 0.88rem !important;
text-align: center;
}

.thumb,
.mw-body-content .thumb {
border: 1px solid var(--pd-border) !important;
background-color: var(--pd-bg) !important;
padding: 3px !important;
}

/* ── 25. DIFF / HISTORY VIEWS ────────────────────────────── */
table.diff {
background-color: var(--pd-bg-content) !important;
font-family: var(--pd-font-body) !important;
font-size: 0.9rem !important;
}

td.diff-addedline {
background-color: rgba(30,60,20,0.35) !important;
}

td.diff-deletedline {
background-color: rgba(90,20,20,0.35) !important;
}

td.diff-context {
background-color: var(--pd-bg-alt) !important;
color: var(--pd-text-muted) !important;
}

/* ── 26. PAGE STATUS INDICATORS ──────────────────────────── */
.mw-indicators {
font-family: var(--pd-font-cinzel) !important;
font-size: 0.7rem !important;
color: var(--pd-text-faint) !important;
letter-spacing: 0.1em !important;
}

/* ── 27. PRINT MEDIA ─────────────────────────────────────── */
@media print {
body {
background: white !important;
color: black !important;
font-family: Georgia, serif !important;
}
#mw-panel, #mw-head, #footer, #catlinks { display: none !important; }
}

/* ── 28. CORE ANIMATIONS (used by JS too) ────────────────── */

@keyframes pd-fadein {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes pd-flickerA {
0%,100% { opacity:1; text-shadow: 0 0 30px rgba(160,43,55,0.45), 0 2px 4px rgba(0,0,0,.8); }
8% { opacity:.95; text-shadow: 0 0 26px rgba(160,43,55,0.3), 0 2px 4px rgba(0,0,0,.8); }
16% { opacity:1; text-shadow: 0 0 35px rgba(160,43,55,0.55), 0 2px 4px rgba(0,0,0,.8); }
30% { opacity:.97; text-shadow: 0 0 28px rgba(160,43,55,0.38), 0 2px 4px rgba(0,0,0,.8); }
56% { opacity:1; text-shadow: 0 0 32px rgba(160,43,55,0.5), 0 2px 4px rgba(0,0,0,.8); }
79% { opacity:.96; text-shadow: 0 0 22px rgba(160,43,55,0.28), 0 2px 4px rgba(0,0,0,.8); }
}

@keyframes pd-flickerB {
0%,100% { opacity:.82; }
20% { opacity:.75; }
45% { opacity:.85; }
70% { opacity:.78; }
}

@keyframes pd-crimsonPulse {
0%,100% { box-shadow: 0 0 6px rgba(122,28,36,0.2), inset 0 0 6px rgba(122,28,36,0.05); }
50% { box-shadow: 0 0 16px rgba(122,28,36,0.5), inset 0 0 12px rgba(122,28,36,0.12); }
}

@keyframes pd-crossFade {
0%,100% { opacity: 0.04; }
50% { opacity: 0.07; }
}

@keyframes pd-dust {
0% { transform: translateY(-10px) translateX(0px) rotate(0deg); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.2; }
100% { transform: translateY(100vh) translateX(40px) rotate(360deg); opacity: 0; }
}

@keyframes pd-slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ── 29. ANIMATED CLASSES APPLIED BY JS ──────────────────── */

/* Main heading flicker */
.pd-flicker {
animation: pd-flickerA 8s ease-in-out infinite !important;
}

/* Sidebar nav glow pulse */
.pd-pulse-border {
animation: pd-crimsonPulse 4s ease-in-out infinite !important;
}

/* Content slide-up reveal */
.pd-reveal {
animation: pd-slideUp 0.9s cubic-bezier(0.4,0,0.2,1) both;
}

/* Background cross watermark */
#pd-watermark {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32vw;
color: rgba(122,28,36,0.035);
pointer-events: none;
z-index: 1;
user-select: none;
font-family: serif;
animation: pd-crossFade 12s ease-in-out infinite;
line-height: 1;
}

/* Dust particle canvas */
#pd-dust-canvas {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 0.55;
}

/* ── 30. VECTOR 2 / MODERN SKIN OVERRIDES ─────────────────── */
.vector-toc-pinned-container,
.vector-toc {
background-color: var(--pd-bg-sidebar) !important;
border: 1px solid var(--pd-border) !important;
}

.vector-toc .vector-toc-level-1 .vector-toc-link {
color: var(--pd-text-muted) !important;
font-family: var(--pd-font-body) !important;
}

.vector-toc-link:hover {
color: var(--pd-rose) !important;
}

.vector-toc-current-anchor .vector-toc-link {
color: var(--pd-rose-lt) !important;
border-left: 2px solid var(--pd-crimson) !important;
}

/* Top toolbar Vector 2 */
.vector-header-container {
background-color: var(--pd-bg-header) !important;
border-bottom: 1px solid var(--pd-border) !important;
}

/* Main menu icon */
.mw-ui-icon-wikimedia-menu::before {
filter: invert(0.6) sepia(1) saturate(0.5) !important;
}

/* ── 31. SPECIAL PAGE OVERRIDES ──────────────────────────── */
#mw-content-text .mw-special-Preferences input[type="text"],
#mw-content-text input,
#mw-content-text select,
#mw-content-text textarea {
background-color: #0e0a09 !important;
color: var(--pd-text) !important;
border: 1px solid var(--pd-border-lt) !important;
font-family: var(--pd-font-body) !important;
}

/* ── 32. MOBILE / RESPONSIVE ─────────────────────────────── */
@media (max-width: 720px) {
.mw-body {
padding: 1rem 1.2rem !important;
}

#firstHeading, .mw-first-heading {
font-size: 1.6rem !important;
}

.mw-body-content > p:first-of-type::first-letter {
font-size: 3.2em !important;
}

#pd-watermark {
font-size: 60vw;
}
}