/* ===========================================================
   TSWT — Atmospheric theme layer
   The treehouse is cozy. The night around it is dread.
   =========================================================== */

:root {
	/* The palette */
	--tswt-bg-deep:      #07050d;
	--tswt-bg-night:     #0d0a14;
	--tswt-bg-card:      #14101c;
	--tswt-bg-elevated:  #1b1626;
	--tswt-bg-mist:      rgba(255,255,255,0.04);

	--tswt-paper:        #efe4cf;
	--tswt-paper-dark:   #d4c4a3;
	--tswt-paper-aged:   #c4b08b;

	--tswt-wood:         #6b4423;
	--tswt-wood-dark:    #3a2410;
	--tswt-wood-rough:   #5b3818;

	--tswt-amber:        #c98a3c;
	--tswt-amber-bright: #e6a753;
	--tswt-amber-deep:   #8c5511;
	--tswt-blood:        #8b1a1a;
	--tswt-blood-bright: #b22424;

	--tswt-text:         #e8e4dd;
	--tswt-text-dim:     rgba(232,228,221,0.62);
	--tswt-text-faint:   rgba(232,228,221,0.38);

	/* Typography */
	--tswt-font-display: 'Cinzel', Georgia, serif;
	--tswt-font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--tswt-font-paper:   'Caveat', cursive;
	--tswt-font-mono:    'Special Elite', 'Courier New', monospace;

	/* Motion */
	--tswt-ease:         cubic-bezier(0.22, 1, 0.36, 1);
	--tswt-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
	--tswt-ease-in:      cubic-bezier(0.7, 0, 0.84, 0);

	/* Layout */
	--tswt-radius-sm:    6px;
	--tswt-radius-md:    14px;
	--tswt-radius-lg:    22px;
	--tswt-radius-full:  999px;

	--tswt-shadow-soft:  0 8px 32px rgba(0,0,0,0.45);
	--tswt-shadow-deep:  0 24px 64px rgba(0,0,0,0.65);
	--tswt-shadow-glow:  0 0 40px rgba(201, 138, 60, 0.25);

	--tswt-blur-glass:   24px;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* Container */
	--tswt-page-max: 1280px;
}

/* ========== Reset / base ========== */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--tswt-bg-deep);
	color: var(--tswt-text);
	font-family: var(--tswt-font-body);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	overflow-x: hidden;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(40, 24, 12, 0.45), transparent 60%),
		radial-gradient(ellipse 100% 80% at 50% 100%, rgba(20, 8, 24, 0.5), transparent 70%);
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background-image:
		radial-gradient(rgba(255,255,255,0.012) 1px, transparent 1px);
	background-size: 4px 4px;
	mix-blend-mode: overlay;
	opacity: 0.3;
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--tswt-amber-bright);
	text-decoration: none;
	transition: color 200ms var(--tswt-ease);
}
a:hover { color: var(--tswt-amber); }

button {
	font-family: inherit;
	cursor: pointer;
}

::selection {
	background: var(--tswt-amber);
	color: var(--tswt-bg-deep);
}

/* ========== Type ========== */
h1, h2, h3, h4, .tswt-display {
	font-family: var(--tswt-font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tswt-text);
	line-height: 1.1;
	margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(2rem, 6vw, 4.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }

p { margin: 0 0 var(--space-4); }

.tswt-eyebrow {
	font-family: var(--tswt-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: 0.7rem;
	color: var(--tswt-amber);
	margin-bottom: var(--space-3);
	opacity: 0.85;
}

.tswt-caveat {
	font-family: var(--tswt-font-paper);
	font-weight: 700;
}

/* ========== Page wrapping ========== */
.entry-content,
.ct-container,
main {
	position: relative;
	z-index: 3;
}

main, .site-content, .ct-main-styles {
	min-height: 100vh;
}

/* Sections breathe */
.tswt-section {
	padding: var(--space-9) var(--space-5);
	max-width: var(--tswt-page-max);
	margin: 0 auto;
	position: relative;
}
@media (max-width: 768px) {
	.tswt-section { padding: var(--space-7) var(--space-4); }
}

.tswt-section--narrow {
	max-width: 920px;
}

.tswt-section__title {
	font-family: var(--tswt-font-display);
	font-size: clamp(1.8rem, 4vw, 3rem);
	margin: 0 0 var(--space-6);
	letter-spacing: 0.02em;
}

.tswt-section__title--center {
	text-align: center;
}

/* Reveal-on-scroll — defensive: only hide when JS is alive. */
html.tswt-js [data-tswt-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 700ms var(--tswt-ease), transform 700ms var(--tswt-ease);
}
html.tswt-js [data-tswt-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ========== Background embers (canvas) ========== */
#tswt-embers {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
#tswt-embers canvas {
	width: 100%;
	height: 100%;
	display: block;
}

/* ========== "Are You Watching?" pulse ========== */
#tswt-watching-pulse {
	position: fixed;
	bottom: max(140px, env(safe-area-inset-bottom, 0) + 120px);
	right: 24px;
	max-width: 240px;
	padding: var(--space-3) var(--space-4);
	background: rgba(15, 12, 20, 0.85);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(201, 138, 60, 0.25);
	border-radius: var(--tswt-radius-md);
	color: var(--tswt-text);
	font-family: var(--tswt-font-paper);
	font-size: 1.1rem;
	line-height: 1.3;
	z-index: 8000;
	animation: tswtPulseIn 600ms var(--tswt-ease-out);
	box-shadow: var(--tswt-shadow-soft);
}
#tswt-watching-pulse[hidden] { display: none; }

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

/* ========== Idle reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	#tswt-embers { display: none; }
}

/* ========== Konami ARG modal ========== */
#tswt-arg-modal {
	position: fixed;
	inset: 0;
	z-index: 9700;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}
#tswt-arg-modal[data-open="1"] { display: flex; }
#tswt-arg-modal .tswt-arg-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7,5,13,0.92);
	-webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
	animation: tswtPulseIn 700ms var(--tswt-ease);
}
#tswt-arg-modal .tswt-arg-modal__panel {
	position: relative;
	max-width: 540px;
	width: 100%;
	background: linear-gradient(180deg, var(--tswt-paper-aged), var(--tswt-paper));
	color: #2a1f10;
	border-radius: 4px;
	padding: var(--space-7) var(--space-6);
	box-shadow: var(--tswt-shadow-deep);
	transform: rotate(-0.5deg);
	background-image: repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(112, 72, 35, 0.18) 28px, rgba(112, 72, 35, 0.18) 29px);
	animation: tswtPulseIn 600ms var(--tswt-ease-out);
}
#tswt-arg-modal h2 {
	font-family: var(--tswt-font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--tswt-blood);
	margin: 0 0 var(--space-3);
}
#tswt-arg-modal .tswt-arg-modal__body {
	font-family: var(--tswt-font-paper);
	font-size: 1.4rem;
	line-height: 1.45;
	color: #2a1f10;
}
#tswt-arg-modal button {
	margin-top: var(--space-5);
	background: var(--tswt-bg-deep);
	color: var(--tswt-amber-bright);
	border: 1px solid var(--tswt-bg-deep);
	padding: 0.7em 1.4em;
	font-family: var(--tswt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border-radius: var(--tswt-radius-full);
	cursor: pointer;
}

/* ========== Mobile-first utilities ========== */
.tswt-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.tswt-grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

.tswt-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 640px) {
	.tswt-grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
	.tswt-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Safe-area padding for bottom navigation + last-seen overlap */
main, .site-content, .entry-content {
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
}

/* Bury Blocksy's loud blue link defaults inside our content. */
.entry-content a {
	color: var(--tswt-amber-bright);
}
.entry-content a:hover { color: var(--tswt-amber); }