@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;700&display=swap");

/* 寒武纪 · 青绿清朗主题 */
:root {
	--hw-ink: #1a2420;
	--hw-ink-soft: #3d4a44;
	--hw-forest: #1f4d3a;
	--hw-bamboo: #2f6b4f;
	--hw-leaf: #3d8a64;
	--hw-mist: #f7f5f0;
	--hw-paper: #ffffff;
	--hw-line: rgba(31, 77, 58, 0.14);
	--hw-accent: #2f6b4f;
	--hw-accent-hover: #1f4d3a;
	--hw-serif: "Noto Serif SC", "Songti SC", Georgia, serif;
	--hw-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
}

body {
	background-color: #14241c;
	color: var(--hw-ink-soft);
	font-family: var(--hw-sans);
	letter-spacing: 0.01em;
	line-height: 1.75;
}

body, input, select, textarea {
	color: var(--hw-ink-soft);
	font-family: var(--hw-sans);
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: var(--hw-ink);
	font-family: var(--hw-serif);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
}

a {
	color: var(--hw-ink);
	border-bottom-color: rgba(31, 77, 58, 0.35);
}

a:hover {
	border-bottom-color: transparent;
	color: var(--hw-bamboo) !important;
}

strong, b {
	color: var(--hw-ink);
}

blockquote {
	border-left-color: var(--hw-bamboo);
}

hr {
	border-bottom-color: var(--hw-line);
}

code {
	background: rgba(31, 77, 58, 0.06);
	border-color: var(--hw-line);
}

/* ---------- Atmosphere / Background ---------- */
#wrapper > .bg {
	background-color: #14241c !important;
	background-image:
		url("../../images/overlay.png"),
		linear-gradient(165deg, rgba(20, 36, 28, 0.55) 0%, rgba(31, 77, 58, 0.45) 45%, rgba(15, 28, 22, 0.65) 100%),
		url("../../images/bg.jpg") !important;
	background-size: auto, auto, cover !important;
	background-position: center, center, center !important;
}

#wrapper.fade-in:before {
	background: #14241c;
}

/* ---------- Intro ---------- */
#intro {
	padding: 9rem 4rem 7rem;
}

#intro h1 {
	font-family: var(--hw-serif);
	font-size: clamp(3rem, 8vw, 5.5rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	margin-bottom: 1.25rem;
	text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}

#intro p {
	font-family: var(--hw-sans);
	font-size: 1.15rem;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.12em;
	opacity: 0.92;
	max-width: 36em;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.9;
}

#intro a:hover {
	color: #b7e0c8 !important;
}

#intro .button:hover {
	box-shadow: inset 0 0 0 2px #b7e0c8 !important;
	color: #b7e0c8 !important;
}

/* Intro entrance */
#wrapper.fade-in #intro h1,
#wrapper.fade-in #intro p,
#wrapper.fade-in #intro .actions {
	opacity: 0;
	transform: translateY(1.25rem);
	animation: hwRise 1s ease forwards;
}

#wrapper.fade-in #intro h1 { animation-delay: 0.35s; }
#wrapper.fade-in #intro p { animation-delay: 0.55s; }
#wrapper.fade-in #intro .actions { animation-delay: 0.75s; }

body.is-preload #wrapper.fade-in #intro h1,
body.is-preload #wrapper.fade-in #intro p,
body.is-preload #wrapper.fade-in #intro .actions {
	animation: none;
}

@keyframes hwRise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Header / Logo ---------- */
#header .logo {
	font-family: var(--hw-serif) !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-indent: 0.22em;
	border-color: rgba(255, 255, 255, 0.92) !important;
	color: #fff !important;
	background: transparent !important;
}

#header .logo:hover {
	border-color: #b7e0c8 !important;
	color: #b7e0c8 !important;
	background: transparent !important;
}

/* ---------- Nav ---------- */
#nav {
	background: var(--hw-paper);
	border-top-color: var(--hw-line);
	box-shadow: 0 12px 32px rgba(20, 36, 28, 0.06);
}

#nav ul.links li a {
	font-family: var(--hw-sans);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--hw-ink-soft) !important;
}

#nav ul.links li.active a {
	color: var(--hw-forest) !important;
	background: transparent !important;
}

#nav ul.links li.active {
	background: linear-gradient(180deg, rgba(47, 107, 79, 0.08), transparent);
}

#nav ul.links li a:hover {
	color: var(--hw-bamboo) !important;
}

#nav:before,
#nav:after {
	background-image: none !important;
	background-color: var(--hw-paper) !important;
}

/* ---------- Main panel ---------- */
#main {
	background: var(--hw-mist);
	box-shadow: 0 0 0 1px var(--hw-line), 0 24px 60px rgba(20, 36, 28, 0.12);
}

#main > .post {
	border-color: var(--hw-line);
}

#main > .posts > * {
	border-color: var(--hw-line);
}

#main > .posts > article {
	padding-top: 2.5rem;
}

#main > .posts > article .image.fit {
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 8px 24px rgba(20, 36, 28, 0.08);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

#main > .posts > article:hover .image.fit {
	box-shadow: 0 16px 36px rgba(20, 36, 28, 0.14);
	transform: translateY(-4px);
}

#main > .posts > article .image.fit img {
	transition: transform 0.5s ease;
}

#main > .posts > article:hover .image.fit img {
	transform: scale(1.04);
}

.post header.major > .date {
	color: var(--hw-bamboo) !important;
	font-family: var(--hw-sans);
	font-weight: 500;
	letter-spacing: 0.16em;
	border-bottom-color: var(--hw-line) !important;
}

.post header.major > .date:before,
.post header.major > .date:after {
	background: var(--hw-line) !important;
}

/* Official site chrome — de-blog */
.eyebrow {
	display: inline-block;
	margin: 0 0 0.85rem;
	padding: 0;
	border: 0;
	color: var(--hw-bamboo) !important;
	font-family: var(--hw-sans) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	font-style: normal !important;
	letter-spacing: 0.22em !important;
	text-transform: none;
}

.site-section-head {
	text-align: center;
	padding: 3.5rem 2.5rem 1.5rem;
	border-top: solid 1px var(--hw-line);
}

.site-section-head h2 {
	margin: 0 0 0.85rem;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	letter-spacing: 0.1em;
	color: var(--hw-ink);
}

.site-section-head p:not(.eyebrow) {
	margin: 0 auto;
	max-width: 36rem;
	color: var(--hw-ink-soft);
	font-size: 1rem;
	line-height: 1.8;
}

.site-home > .site-intro {
	border-bottom: 0;
}

.site-home > .site-intro header.major p:not(.eyebrow) {
	font-style: normal;
	letter-spacing: 0.02em;
}

.site-business > article > header {
	text-align: center;
}

.site-business > article > header h2 {
	font-size: 1.45rem;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
}

.site-business > article > header .date {
	display: none;
}

#main .post > header.major .date {
	display: none;
}

#main .post > header.major p.lead,
#main .post > header.major > p:not(.eyebrow) {
	font-style: normal;
}

.post header h1,
.post header h2,
.post header h3 {
	font-family: var(--hw-serif);
	letter-spacing: 0.06em;
}

.post featured header.major h2 {
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	letter-spacing: 0.08em;
}

.post featured .image.main {
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 12px 40px rgba(20, 36, 28, 0.12);
}

.post .image.main {
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 10px 28px rgba(20, 36, 28, 0.1);
}

/* Detail page headings */
#main .post h2 {
	margin-top: 2.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--hw-line);
	color: var(--hw-forest);
	font-size: 1.55rem;
	letter-spacing: 0.08em;
}

#main .post h2:first-of-type {
	border-top: 0;
	margin-top: 1.5rem;
}

#main .post h3 {
	color: var(--hw-ink);
	font-size: 1.15rem;
	margin-top: 1.75rem;
	letter-spacing: 0.06em;
}

#main .post ul li::marker {
	color: var(--hw-bamboo);
}

/* ---------- Buttons ---------- */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	font-family: var(--hw-sans) !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em !important;
	border-radius: 2px !important;
	box-shadow: inset 0 0 0 2px var(--hw-forest) !important;
	color: var(--hw-forest) !important;
	background-color: transparent !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	box-shadow: inset 0 0 0 2px var(--hw-bamboo) !important;
	color: var(--hw-bamboo) !important;
	background-color: rgba(47, 107, 79, 0.06) !important;
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary,
.button.large {
	background-color: var(--hw-forest) !important;
	box-shadow: none !important;
	color: #fff !important;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover,
.button.large:hover {
	background-color: var(--hw-bamboo) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Featured CTA stays solid */
.post.featured .button.large {
	background-color: var(--hw-forest) !important;
	box-shadow: none !important;
	color: #fff !important;
	padding-left: 2.25rem;
	padding-right: 2.25rem;
}

.post.featured .button.large:hover {
	background-color: var(--hw-bamboo) !important;
}

/* ---------- Footer ---------- */
#footer {
	background-color: #163528 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	border-top: 1px solid rgba(183, 224, 200, 0.12);
}

#footer > section {
	border-left-color: rgba(255, 255, 255, 0.12) !important;
}

#footer > section.split > section {
	border-top-color: rgba(255, 255, 255, 0.12) !important;
}

#footer h3 {
	color: #b7e0c8 !important;
	font-family: var(--hw-serif);
	letter-spacing: 0.16em;
	font-size: 0.95rem !important;
	font-weight: 700;
	min-width: 4.5rem;
}

#footer p {
	color: #ffffff !important;
	font-size: 1rem !important;
	line-height: 1.7;
	opacity: 1;
}

#footer a {
	color: #ffffff !important;
	border-bottom-color: rgba(183, 224, 200, 0.45);
}

#footer a:hover {
	color: #b7e0c8 !important;
	border-bottom-color: transparent;
}

#footer .split.contact > section {
	border-color: rgba(255, 255, 255, 0.12);
}

@media screen and (max-width: 980px) {
	#footer > section {
		border-top-color: rgba(255, 255, 255, 0.12) !important;
	}
}

#copyright {
	color: rgba(255, 255, 255, 0.7);
	background: transparent;
}

#copyright a {
	color: rgba(255, 255, 255, 0.85);
}

#copyright a:hover {
	color: #b7e0c8 !important;
}

/* ---------- Forms (if any remain) ---------- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--hw-bamboo) !important;
	box-shadow: 0 0 0 1px var(--hw-bamboo) !important;
}

/* ---------- Mobile nav panel ---------- */
#navPanel {
	background: #14241c;
}

#navPanel .link {
	color: rgba(255, 255, 255, 0.8) !important;
	border-top-color: rgba(255, 255, 255, 0.1) !important;
	font-family: var(--hw-sans);
	letter-spacing: 0.08em;
}

#navPanel .link:hover,
#navPanel .link:active {
	color: #b7e0c8 !important;
}

#navPanelToggle {
	background: var(--hw-forest) !important;
	color: #fff !important;
	box-shadow: 0 8px 24px rgba(20, 36, 28, 0.25);
}

/* ---------- Soft section rise on content pages ---------- */
#main > .post > header.major {
	animation: hwRise 0.8s ease both;
	animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

@media screen and (max-width: 736px) {
	#intro {
		padding: 6rem 1.5rem 4.5rem;
	}

	#intro h1 {
		letter-spacing: 0.12em;
		text-indent: 0.12em;
	}

	#intro p {
		letter-spacing: 0.06em;
		font-size: 1rem;
	}
}