/*
Theme Name: MoonLyra
Theme URI: https://moonlyra.com/
Author: MoonLyra
Description: A moon-phase personal WordPress theme with an immersive canvas homepage, dynamic posts, and quiet long-form reading pages.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: moonlyra
*/

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

:root {
	--night: #101613;
	--night-2: #151d18;
	--moon: #f5ecd2;
	--ink: #f2eddf;
	--ink-78: rgba(242, 237, 223, .78);
	--ink-68: rgba(242, 237, 223, .68);
	--ink-46: rgba(242, 237, 223, .46);
	--ink-34: rgba(242, 237, 223, .34);
	--ink-18: rgba(242, 237, 223, .18);
	--ink-14: rgba(242, 237, 223, .14);
	--jade: #9fbea6;
	--gold: #bfa76a;
	--danger: #d8a18d;
	--serif: "Noto Serif SC", serif;
	--sans: "Inter", "Noto Sans SC", sans-serif;
}

html {
	background: var(--night);
}

body {
	margin: 0;
	background: var(--night);
	color: var(--ink);
	font-family: var(--sans);
	letter-spacing: 0;
}

a {
	color: inherit;
}

.moonlyra-front {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.moonlyra-front #wpadminbar {
	position: fixed;
}

#moon-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#snap-wrap {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow-y: auto;
	scrollbar-width: none;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
}

#snap-wrap::-webkit-scrollbar {
	display: none;
}

.admin-bar #moon-canvas,
.admin-bar #snap-wrap {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #moon-canvas,
	.admin-bar #snap-wrap {
		top: 46px;
	}
}

.screen {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 100svh;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.screen::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background: radial-gradient(
		ellipse 65% 45% at var(--wx, 60%) var(--wy, 15%),
		rgba(245, 236, 210, var(--wo, 0)) 0%,
		transparent 100%
	);
	pointer-events: none;
}

.content {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	max-width: 640px;
	flex-direction: column;
	align-items: center;
	padding: 0 32px;
	text-align: center;
}

.corner {
	position: absolute;
	z-index: 2;
	color: var(--ink-34);
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.c-tl {
	top: 36px;
	left: 48px;
}

.c-tr {
	top: 36px;
	right: 48px;
}

.c-bl {
	bottom: 96px;
	left: 48px;
}

.phase-tag,
.phase-sub,
.ch-h2,
.ch-body,
.tag-row,
.article-list,
.links-grid,
.btn-row,
.cta-closing {
	opacity: 0;
	will-change: opacity, transform, filter;
}

.phase-tag {
	margin-bottom: 9px;
	color: var(--jade);
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.phase-sub {
	margin-bottom: 26px;
	color: var(--ink-34);
	font-family: var(--serif);
	font-size: 9px;
	letter-spacing: .12em;
}

.hero-h1 {
	margin: 0 0 26px;
	font-family: var(--serif);
	font-size: clamp(82px, 12vw, 118px);
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1;
	opacity: 0;
	text-shadow: var(--moon-title-shadow, none);
	animation: fadeUp .95s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}

.char-yue {
	color: var(--moon);
}

.char-li {
	color: var(--jade);
}

.hero-slogan,
.ch-body,
.cta-closing {
	text-shadow: var(--moon-body-shadow, none);
}

.hero-slogan {
	margin: 0 0 38px;
	color: var(--ink-68);
	font-family: var(--serif);
	font-size: clamp(13px, 1.3vw, 15px);
	font-weight: 300;
	letter-spacing: .12em;
	line-height: 2.3;
	opacity: 0;
	animation: fadeUp .95s cubic-bezier(.22, 1, .36, 1) .45s forwards;
}

.hero-clock {
	margin-bottom: 36px;
	color: var(--ink-34);
	font-family: var(--sans);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .18em;
	opacity: 0;
	text-shadow: var(--moon-small-shadow, none);
	animation: fadeUp .95s cubic-bezier(.22, 1, .36, 1) .65s forwards;
}

.hero-btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	opacity: 0;
	animation: fadeUp .95s cubic-bezier(.22, 1, .36, 1) .82s forwards;
}

.ch-h2 {
	margin: 0 0 20px;
	font-family: var(--serif);
	font-size: clamp(26px, 3.8vw, 44px);
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.38;
	text-shadow: var(--moon-title-shadow, none);
}

.ch-body {
	max-width: 470px;
	margin: 0;
	color: var(--ink-68);
	font-family: "Noto Sans SC", var(--sans);
	font-size: clamp(13px, 1.2vw, 15px);
	font-weight: 300;
	line-height: 2;
}

.tag-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 22px;
	gap: 8px;
}

.pill {
	padding: 4px 14px;
	border: 1px solid var(--ink-14);
	border-radius: 999px;
	box-shadow: var(--moon-soft-edge-glow, none);
	color: var(--ink-68);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: .06em;
	transition: border-color .3s, box-shadow .3s, color .3s;
}

.pill:hover {
	border-color: var(--jade);
	color: var(--jade);
}

.article-list {
	width: 100%;
	max-width: 420px;
	margin-top: 22px;
}

.art-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--ink-14);
	box-shadow: var(--moon-line-glow, none);
	color: inherit;
	text-decoration: none;
	transition: border-color .25s;
}

.art-item:first-child {
	border-top: 1px solid var(--ink-14);
}

.art-item:hover {
	border-color: var(--jade);
}

.art-title {
	flex: 1;
	color: var(--ink-68);
	font-family: var(--serif);
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	transition: color .25s;
}

.art-item:hover .art-title {
	color: var(--jade);
}

.art-date {
	flex-shrink: 0;
	margin-left: 14px;
	color: var(--ink-34);
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: .1em;
}

.links-grid {
	display: flex;
	width: 100%;
	max-width: 340px;
	flex-direction: column;
	margin-top: 22px;
	gap: 10px;
}

.link-item {
	display: flex;
	align-items: center;
	padding: 13px 18px;
	border: 1px solid var(--ink-14);
	border-radius: 8px;
	background: rgba(245, 236, 210, .01);
	box-shadow: var(--moon-edge-glow, none);
	color: var(--ink-68);
	gap: 14px;
	text-decoration: none;
	transition: background .25s, border-color .25s, box-shadow .25s, color .25s;
}

.link-item:hover {
	border-color: var(--jade);
	background: rgba(159, 190, 166, .05);
	color: var(--jade);
}

.link-platform {
	width: 58px;
	flex-shrink: 0;
	color: var(--ink-34);
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.link-handle {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--serif);
	font-size: 14px;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 30px;
	gap: 12px;
}

.btn-primary,
.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: .1em;
	text-decoration: none;
	transition: background .3s, border-color .3s, box-shadow .3s, color .3s;
}

.btn-primary {
	padding: 12px 32px;
	border: 1px solid var(--jade);
	box-shadow: var(--moon-primary-glow, var(--moon-edge-glow, none));
	color: var(--jade);
}

.btn-primary:hover {
	background: rgba(159, 190, 166, .1);
	box-shadow: var(--moon-primary-hover-glow, 0 0 20px rgba(159, 190, 166, .14));
	color: var(--moon);
}

.btn-ghost {
	padding: 12px 26px;
	border: 1px solid var(--ink-14);
	box-shadow: var(--moon-edge-glow, none);
	color: var(--ink-34);
}

.btn-ghost:hover {
	border-color: var(--ink-34);
	color: var(--ink-68);
}

.btn-primary svg,
.btn-ghost svg {
	width: 12px;
	height: 12px;
	margin-left: 10px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
	transition: transform .25s;
}

.btn-primary:hover svg,
.btn-ghost:hover svg {
	transform: translateX(3px);
}

.scroll-hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	gap: 10px;
	opacity: 0;
	animation: fadeUp .95s cubic-bezier(.22, 1, .36, 1) 1.02s forwards;
}

.scroll-hint span {
	color: var(--ink-34);
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: .2em;
	text-shadow: var(--moon-small-shadow, none);
	text-transform: uppercase;
}

.scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(to bottom, var(--jade), transparent);
	animation: breathe 3s ease-in-out infinite;
}

.cta-closing {
	margin: 28px 0 0;
	color: var(--ink-34);
	font-family: var(--serif);
	font-size: clamp(13px, 1.2vw, 14px);
	font-weight: 300;
	letter-spacing: .1em;
	line-height: 2;
}

.phase-nav {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	padding: 10px 18px;
	border: 1px solid var(--ink-14);
	border-radius: 999px;
	background: rgba(16, 22, 19, .55);
	backdrop-filter: blur(12px);
	gap: 4px;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity .5s;
}

.phase-nav.visible {
	opacity: 1;
}

.pn-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2px 5px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	gap: 4px;
	transition: background .2s;
}

.pn-item:hover {
	background: rgba(159, 190, 166, .08);
}

.pn-moon,
.pn-moon canvas {
	display: block;
	width: 14px;
	height: 14px;
}

.pn-label {
	color: var(--ink-34);
	font-family: var(--sans);
	font-size: 7.5px;
	letter-spacing: .08em;
	opacity: 0;
	transition: color .3s, opacity .3s;
	white-space: nowrap;
}

.pn-item.active .pn-label {
	color: var(--jade);
	opacity: 1;
}

.pn-sep {
	width: 1px;
	height: 10px;
	align-self: center;
	margin-bottom: 12px;
	background: var(--ink-14);
}

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

@keyframes breathe {
	0%, 100% {
		opacity: .22;
	}
	50% {
		opacity: .65;
	}
}

.site-shell {
	position: relative;
	width: min(100% - 40px, 960px);
	margin: 0 auto;
	padding: 72px 0 96px;
}

.site-shell::before {
	position: fixed;
	inset: -20%;
	z-index: -1;
	content: "";
	background:
		radial-gradient(circle at 12% 18%, rgba(159, 190, 166, .12), transparent 25%),
		radial-gradient(circle at 86% 12%, rgba(245, 236, 210, .10), transparent 22%),
		linear-gradient(180deg, #101613 0%, #151d18 100%);
}

.back-home {
	display: inline-flex;
	margin-bottom: 42px;
	color: var(--jade);
	font-family: var(--serif);
	font-size: 17px;
	text-decoration: none;
}

.back-home:hover {
	color: var(--moon);
}

.inner-hero {
	max-width: 760px;
	margin-bottom: 52px;
}

.eyebrow {
	margin: 0 0 12px;
	color: var(--jade);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.inner-hero h1,
.entry-head h1 {
	margin: 0;
	color: var(--moon);
	font-family: var(--serif);
	font-size: clamp(40px, 8vw, 78px);
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.12;
}

.inner-hero p:not(.eyebrow),
.entry-head p:not(.eyebrow) {
	max-width: 620px;
	margin: 22px 0 0;
	color: var(--ink-68);
	font-family: "Noto Sans SC", var(--sans);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.9;
}

.post-river {
	display: grid;
	gap: 14px;
}

.river-item {
	margin: 0;
}

.river-item a {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	padding: 22px 0;
	border-top: 1px solid var(--ink-14);
	color: inherit;
	text-decoration: none;
	gap: 28px;
}

.river-item:last-child a {
	border-bottom: 1px solid var(--ink-14);
}

.river-item time {
	color: var(--ink-34);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: .1em;
}

.river-item h2 {
	margin: 0 0 10px;
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 400;
	line-height: 1.3;
	transition: color .25s;
}

.river-item p {
	max-width: 680px;
	margin: 0;
	color: var(--ink-68);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
}

.river-item a:hover h2 {
	color: var(--jade);
}

.single-entry {
	max-width: 760px;
	margin: 0 auto;
}

.entry-head {
	margin-bottom: 42px;
}

.entry-content {
	color: var(--ink-78);
	font-family: "Noto Sans SC", var(--sans);
	font-size: 17px;
	font-weight: 300;
	line-height: 2;
}

.entry-content > * {
	margin-top: 0;
	margin-bottom: 1.35em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2em;
	color: var(--moon);
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.35;
}

.entry-content a {
	color: var(--jade);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.entry-content blockquote {
	margin: 2em 0;
	padding-left: 22px;
	border-left: 1px solid var(--jade);
	color: var(--ink-68);
	font-family: var(--serif);
}

.entry-content pre,
.entry-content code {
	border-radius: 6px;
	background: rgba(245, 236, 210, .08);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.entry-content code {
	padding: .14em .35em;
}

.entry-content pre {
	overflow-x: auto;
	padding: 18px;
}

.entry-foot {
	margin-top: 56px;
	padding-top: 20px;
	border-top: 1px solid var(--ink-14);
	color: var(--ink-46);
	font-size: 13px;
}

.entry-foot a {
	color: var(--jade);
	text-decoration: none;
}

.pagination-nav,
.empty-state {
	margin-top: 36px;
	color: var(--ink-68);
}

.pagination-nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin-right: 6px;
	border: 1px solid var(--ink-14);
	border-radius: 999px;
	color: var(--ink-68);
	text-decoration: none;
}

.pagination-nav .current,
.pagination-nav .page-numbers:hover {
	border-color: var(--jade);
	color: var(--jade);
}

.empty-state {
	padding: 40px 0;
	border-top: 1px solid var(--ink-14);
	border-bottom: 1px solid var(--ink-14);
}

.empty-state h2 {
	margin: 0 0 8px;
	color: var(--moon);
	font-family: var(--serif);
	font-weight: 400;
}

.empty-state p {
	margin: 0;
	color: var(--ink-68);
}

button:focus-visible,
a:focus-visible {
	outline: 1px solid var(--jade);
	outline-offset: 4px;
}

@media (max-width: 720px) {
	.content {
		padding: 0 24px;
	}

	.corner {
		font-size: 9px;
	}

	.c-tl,
	.c-bl {
		left: 22px;
	}

	.c-tr {
		right: 22px;
	}

	.c-bl {
		bottom: 88px;
	}

	.phase-nav {
		bottom: 16px;
		max-width: calc(100vw - 24px);
		padding: 9px 12px;
		gap: 2px;
		overflow-x: auto;
	}

	.pn-label {
		display: none;
	}

	.pn-sep {
		margin-bottom: 2px;
	}

	.hero-h1 {
		font-size: clamp(74px, 24vw, 102px);
	}

	.hero-slogan {
		letter-spacing: .08em;
	}

	.river-item a {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.site-shell {
		width: min(100% - 32px, 960px);
		padding-top: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	#snap-wrap {
		scroll-snap-type: none;
	}
}