/* =========================
   COLOR TOKENS (ACCESSIBLE SYSTEM)
========================= */

:root {

	/* TEXT */
	--color-text: #1a2424;
	--color-text-muted: rgba(26, 36, 36, 0.65);

	/* BACKGROUND */
	--color-bg: #d6efee;

	/* ACCENT (LINKS / UI) */
	--color-accent: #1f6f8b;
	--color-accent-hover: #155c73;
	--color-accent-active: #0f4c5c;

	/* BORDERS */
	--color-border: rgba(26, 36, 36, 0.18);

	/* INTERACTION */
	--color-selection-bg: #155c73;
	--color-selection-text: #ffffff;
	--color-focus: #1f6f8b;
}

/* =========================
   BASE
========================= */

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =========================
   LINKS (GLOBAL SYSTEM)
========================= */

a,
.widget a,
.widget a:visited,
.widget_recent_entries a,
.wp-block-latest-posts a,
.site-footer a {
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
	transition: all 0.25s ease;
}

a:hover,
.widget a:hover,
.widget_recent_entries a:hover,
.wp-block-latest-posts a:hover,
.site-footer a:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* =========================
   TEXT SELECTION + FOCUS
========================= */

::selection {
	background: var(--color-selection-bg);
	color: var(--color-selection-text);
}

:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

/* =========================
   TYPOGRAPHY
========================= */

.entry-content p {
	line-height: 1.8;
	font-size: 1.08em;
	margin-bottom: 1.4em;
	max-width: 70ch;
}

/* =========================
   HEADINGS / TITLES
========================= */

h1, h2, h3 {
	letter-spacing: 0.3px;
	font-weight: 600;
}

.entry-title {
	line-height: 1.3;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.entry-title a {
	color: var(--color-text);
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease;
}

.entry-title a:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* =========================
   LAYOUT
========================= */

.site-content {
	max-width: 1200px;
	margin: 0 auto;
}

.content-area,
.site-main {
	max-width: 1100px;
	margin: 0 auto;
}

/* =========================
   SIDEBAR
========================= */

.widget {
	margin-bottom: 2em;
}

.widget-title {
	color: var(--color-accent);
	font-size: 0.8em;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* =========================
   META
========================= */

.entry-meta {
	color: var(--color-text-muted);
	font-size: 0.85em;
}

/* =========================
   ANIMATION
========================= */

article {
	animation: fadeIn 0.8s ease-in;
}

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

/* =========================
   HEADER
========================= */

.site-header img {
	border-radius: 50%;
	border: 2px solid var(--color-accent);
	padding: 3px;
	transition: transform 0.3s ease;
}

.site-branding,
.site-title,
.site-description {
	text-align: center;
}

.site-header .site-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* =========================
   BACKGROUND LAYER
========================= */

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at top, rgba(255,255,255,0.25), transparent 60%);
	pointer-events: none;
}