:root { color-scheme: light; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; --ink: #182b3a; --muted: #596b72; --paper: #f7f2e8; --cream: #fbf8f1; --navy: #173247; --gold: #d49a4a; --orange: #c96b45; --line: #d9d1c2; }
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); margin: 0; }
body::before { background-image: radial-gradient(rgba(23, 50, 71, 0.07) 0.7px, transparent 0.7px); background-size: 9px 9px; content: ""; inset: 0; opacity: 0.35; pointer-events: none; position: fixed; z-index: -1; }
a { color: #0f6370; text-underline-offset: 0.18em; }
a:hover { color: var(--orange); }
a:focus-visible { outline: 3px solid #d97745; outline-offset: 3px; }
.site-header, main, .site-footer { margin: 0 auto; max-width: 70rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.site-header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 1.1rem 1.5rem; justify-content: space-between; padding-bottom: 1.5rem; padding-top: 1.5rem; }
.site-name { color: var(--ink); font-size: 1.05rem; font-weight: 800; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
nav a { color: #3d5661; font-size: 0.95rem; text-decoration: none; }
nav a[aria-current="page"] { color: #0f6370; font-weight: 700; text-decoration: underline; }
.language-switch { gap: 0.5rem; }
.language-switch [aria-current="page"] { color: var(--ink); font-weight: 700; }
main { min-height: 65vh; padding-bottom: 4rem; }
.skip-link { background: #24211e; color: #fff; left: 0.75rem; padding: 0.6rem 0.8rem; position: absolute; top: -4rem; z-index: 1; }
.skip-link:focus { top: 0.75rem; }
.hero { background: linear-gradient(155deg, #173247 0%, #23485a 54%, #c96b45 145%); border-bottom: 1px solid #173247; color: #fffaf0; margin: 0 -1.5rem; overflow: hidden; padding: 5.5rem 1.5rem 4.5rem; position: relative; }
.hero::after { background: linear-gradient(168deg, transparent 48%, rgba(247, 211, 145, 0.2) 49%, rgba(247, 211, 145, 0.2) 51%, transparent 52%); content: ""; inset: 0; opacity: 0.8; pointer-events: none; position: absolute; }
.road-sun { background: #f6c879; border-radius: 50%; box-shadow: 0 0 0 18px rgba(246, 200, 121, 0.1), 0 0 70px rgba(246, 200, 121, 0.4); height: 7rem; position: absolute; right: 11%; top: 3rem; width: 7rem; }
.road-line { bottom: 1.5rem; display: flex; gap: 0.6rem; left: 50%; position: absolute; transform: translateX(-50%) rotate(-8deg); z-index: 1; }
.road-line span { background: #f7d78e; border-radius: 999px; display: block; height: 0.25rem; width: 2.5rem; }
.road-line span:nth-child(2) { width: 4rem; }
.road-line span:nth-child(3) { width: 6rem; }
.hero-grid { align-items: end; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr); }
.hero-main { min-width: 0; }
.hero .eyebrow { color: #f7d78e; }
.hero h1 { color: #fffaf0; }
.hero h1 { font-family: ui-serif, Georgia, serif; font-size: 3.4rem; line-height: 1.08; margin: 0; }
.hero-title-zh { white-space: nowrap; }
.hero-copy, .lead, .summary { color: #d9e5e3; font-size: 1.12rem; max-width: 42rem; }
.hero-copy p { margin-bottom: 0; }
.eyebrow, .metadata { color: #766f67; font-size: 0.82rem; font-weight: 750; text-transform: uppercase; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; }
.hero-note { background: #24211e; color: #f8f6f0; max-width: 20rem; padding: 1.5rem; transform: rotate(1deg); }
.hero-note .eyebrow { color: #c9c2b6; }
.hero-note p { margin: 0 0 1rem; }
.hero-note a { color: #f6c58b; font-weight: 700; text-decoration: none; }
.note-mark { color: #f6c58b; display: block; font-size: 2rem; line-height: 1; margin-bottom: 1.25rem; }
.button { background: #f6c879; border: 2px solid #f6c879; color: #173247; display: inline-block; font-weight: 800; padding: 0.55rem 0.85rem; text-decoration: none; }
.button:hover { background: #fff0c5; border-color: #fff0c5; color: #173247; }
.text-link { font-weight: 700; }
.content-section { border-bottom: 1px solid var(--line); padding: 3rem 0; }
.section-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.section-heading h2 { font-family: ui-serif, Georgia, serif; font-size: 2rem; margin: 0; }
.section-heading .eyebrow { margin-bottom: 0.1rem; }
.post-list { display: grid; gap: 0; margin-top: 1.5rem; }
.post-preview { border-top: 1px solid var(--line); padding: 1.35rem 0; }
.post-preview-top { align-items: center; display: flex; justify-content: space-between; }
.post-arrow { color: #d97745; font-size: 1.35rem; }
.post-preview h2, .post-preview h3 { font-family: ui-serif, Georgia, serif; font-size: 1.4rem; margin: 0; }
.post-preview p { margin-bottom: 0; max-width: 42rem; }
.metadata { margin: 0 0 0.35rem; }
.article-meta, .tags, .translation-status { color: #57514b; font-size: 0.9rem; }
.article-meta { margin-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0; }
.translation-status { border-left: 3px solid #d97745; padding-left: 0.65rem; }
.empty-state { background: #f0eee8; border-left: 4px solid #d97745; margin-top: 1.5rem; max-width: 46rem; padding: 1.25rem 1.5rem; }
.empty-state h2, .empty-state h3 { margin-top: 0; }
.empty-state .button { margin-top: 0.4rem; }
.profile-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-link { background: rgba(255, 252, 244, 0.72); border: 1px solid var(--line); color: var(--ink); display: flex; flex-direction: column; gap: 0.25rem; min-height: 8rem; padding: 1.25rem; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.profile-link:hover { border-color: #d97745; transform: translateY(-3px); }
.profile-link:hover { background: #e6e0d5; color: #24211e; }
.profile-link span { color: #0f6370; font-size: 0.9rem; font-weight: 750; }
.profile-link strong { font-family: ui-serif, Georgia, serif; font-size: 1.35rem; }
.page-header { border-bottom: 1px solid var(--line); padding: 3.5rem 0 2rem; }
.page-header h1, article h1 { font-family: ui-serif, Georgia, serif; font-size: 3.5rem; line-height: 1.15; margin: 0; }
article { max-width: 46rem; padding-top: 3.5rem; }
article > :not(h1):not(.eyebrow):not(.summary) { max-width: 42rem; }
article h2 { font-family: ui-serif, Georgia, serif; margin-top: 2rem; }
.site-footer { align-items: baseline; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 1rem; justify-content: space-between; padding-bottom: 2rem; padding-top: 1.5rem; }
.site-footer p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 42rem) { .site-header { align-items: flex-start; flex-direction: column; gap: 0.8rem; } .hero { padding: 3.5rem 1.5rem 3rem; } .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-note { max-width: none; transform: none; } .hero h1 { font-size: 2.4rem; } .hero-title-zh { white-space: normal; } .page-header h1, article h1 { font-size: 2.25rem; } .profile-grid { grid-template-columns: 1fr; } .section-heading, .site-footer { align-items: flex-start; flex-direction: column; } }