:root {
--color-bg: #ffffff;
--color-surface: #f8fafc;
--color-text: #475569; --color-heading: #0f172a; --color-accent: #2563eb; --color-accent-hover: #1d4ed8;
--color-muted: #64748b; --color-border: #e2e8f0; --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-serif: Georgia, 'Times New Roman', serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--container-width: 720px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} body {
font-family: var(--font-sans);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.75;
font-size: 1.125rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-heading);
font-family: var(--font-serif);
line-height: 1.25;
margin-bottom: var(--space-sm);
font-weight: 700;
}
h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.75rem; margin-top: var(--space-xl); }
h3 { font-size: 1.4rem; margin-top: var(--space-lg); }
h4 { font-size: 1.15rem; font-family: var(--font-sans); }
p { 
margin-bottom: var(--space-md); 
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color 0.2s ease;
&:hover { 
color: var(--color-accent-hover); 
text-decoration: underline; 
}
}
strong, b { 
color: var(--color-heading); 
font-weight: 600; 
}
blockquote {
border-left: 4px solid var(--color-accent);
background-color: var(--color-surface);
padding: var(--space-md);
margin: var(--space-lg) 0;
font-style: italic;
color: var(--color-heading);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
cite { 
display: block; 
margin-top: var(--space-xs); 
font-size: 0.95rem; 
color: var(--color-muted); 
font-style: normal; 
font-weight: 500; 
}
}
ul, ol {
margin-bottom: var(--space-md);
padding-left: var(--space-lg);
li { 
margin-bottom: 0.25rem; 
&::marker { color: var(--color-accent); } 
}
}
code {
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.875rem;
background-color: var(--color-surface);
color: #b91c1c;
padding: 0.2rem 0.4rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
pre {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
padding: var(--space-md);
border-radius: var(--radius-md);
overflow-x: auto;
margin-bottom: var(--space-md);
code { 
background-color: transparent; 
padding: 0; 
color: var(--color-text); 
border: none; 
font-size: 0.9rem; 
}
}
hr { 
border: 0; 
border-top: 1px solid var(--color-border); 
margin: var(--space-xl) 0; 
}
img { 
max-width: 100%; 
height: auto; 
border-radius: var(--radius-md); 
}
figure {
margin-bottom: var(--space-md);
figcaption { 
font-size: 0.875rem; 
color: var(--color-muted); 
text-align: center; 
margin-top: var(--space-xs); 
}
} button, 
input[type="submit"], 
input[type="button"], 
.btn, 
.comment-reply-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
font-size: 0.95rem;
font-family: var(--font-sans);
font-weight: 600;
line-height: 1.5;
text-decoration: none; border: 1px solid transparent;
border-radius: var(--radius-md);
background-color: var(--color-heading);
color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
-webkit-appearance: none;
&:hover { 
background-color: var(--color-accent);
color: #ffffff;
text-decoration: none; 
}
} .btn-secondary {
background-color: transparent;
border-color: var(--color-border);
color: var(--color-text);
&:hover { 
background-color: var(--color-surface); 
border-color: var(--color-muted); 
color: var(--color-heading); 
}
} .btn-text {
background-color: transparent;
border: none;
padding: 0;
color: var(--color-accent);
&:hover { 
background-color: transparent;
color: var(--color-accent-hover); 
text-decoration: underline; 
}
} .btn-sm { 
padding: 0.4rem 0.75rem; 
font-size: 0.85rem; 
} .pagination {
margin-top: var(--space-xl);
display: flex;
justify-content: center; align-items: center;
gap: var(--space-xs); flex-wrap: wrap;
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.5rem;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
text-decoration: none;
transition: all 0.2s ease;
&.current { 
background-color: var(--color-heading); 
color: #ffffff; 
border-color: var(--color-heading); 
}
&:hover:not(.current) { 
background-color: var(--color-surface); 
border-color: var(--color-muted);
color: var(--color-heading);
} &.prev, &.next {
padding: 0 1rem;
font-weight: 600;
}
}
} .table-container { 
width: 100%; 
overflow-x: auto; 
margin-bottom: var(--space-lg); 
border: 1px solid var(--color-border); 
border-radius: var(--radius-lg); 
}
table {
width: 100%; 
border-collapse: collapse; 
text-align: left; 
font-size: 1rem; 
background-color: var(--color-bg);
th, td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); }
th { background-color: var(--color-surface); color: var(--color-heading); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr:nth-child(even) { background-color: rgba(248, 250, 252, 0.5); }
tbody tr:hover { background-color: var(--color-surface); }
tr:last-child td { border-bottom: none; }
} .header-container, .content-container, .footer-container { 
max-width: var(--container-width); 
margin: 0 auto; 
padding: 0 var(--space-md); 
}
.site-header {
padding: var(--space-lg) 0; 
border-bottom: 1px solid var(--color-border); 
margin-bottom: var(--space-xl);
.header-container { display: flex; justify-content: space-between; align-items: center; }
.site-logo { font-size: 1.25rem; font-weight: 700; color: var(--color-heading); letter-spacing: -0.02em; }
.site-nav ul { 
display: flex; 
gap: var(--space-md); 
list-style: none; 
padding: 0; 
margin: 0; 
a { 
color: var(--color-muted); 
font-size: 0.95rem; 
font-weight: 500; 
&:hover { color: var(--color-accent); text-decoration: none; } 
} 
}
} .post-list { 
display: flex; 
flex-direction: column; 
gap: var(--space-md); }
.post-item {
display: flex; 
flex-direction: column; 
gap: 0.75rem; background-color: var(--color-bg);
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
padding: var(--space-md);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
&:hover {
border-color: var(--color-muted);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
} .post-item-excerpt p, 
p { 
margin-bottom: 0.25rem; 
}
.post-item-meta { 
font-size: 0.875rem; 
color: var(--color-muted); 
}
.post-item-title { 
font-size: 1.6rem; 
line-height: 1.3; 
margin: 0;
a { 
color: var(--color-heading); 
&:hover { color: var(--color-accent); text-decoration: none; } 
} 
} .read-more {
align-self: flex-start;
margin-top: 0.5rem;
}
} .post-header {
margin-bottom: var(--space-lg); 
text-align: center;
.post-category { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-xs); }
.post-meta { display: flex; justify-content: center; gap: var(--space-sm); font-size: 0.95rem; color: var(--color-muted); .meta-sep { color: var(--color-border); } }
}
.post-featured-image { 
margin-bottom: var(--space-lg); 
border-radius: var(--radius-lg); 
overflow: hidden; 
img { width: 100%; display: block; } 
}
.post-content { .lead {
font-size: 1.25rem;
line-height: 1.6;
color: var(--color-heading);
margin-bottom: var(--space-lg);
}
}
.post-footer {
margin-top: var(--space-xl); 
padding-top: var(--space-lg); 
border-top: 1px solid var(--color-border);
.post-tags { 
margin-bottom: var(--space-lg); 
font-size: 0.95rem; 
display: flex; 
gap: 0.5rem; 
align-items: center; 
span { color: var(--color-muted); } 
a { 
background-color: var(--color-surface); 
color: var(--color-text); 
padding: 0.25rem 0.75rem; 
border-radius: 9999px; 
font-size: 0.875rem; 
&:hover { background-color: var(--color-accent); color: #fff; text-decoration: none; } 
} 
}
.author-bio { 
display: flex; 
align-items: center; 
gap: var(--space-md); 
background-color: var(--color-surface); 
padding: var(--space-md); 
border-radius: var(--radius-lg); 
.author-avatar img { border-radius: 50%; display: block; } 
.author-info { 
h4 { color: var(--color-heading); margin-bottom: 0.25rem; } 
p { font-size: 0.95rem; color: var(--color-muted); margin-bottom: 0; line-height: 1.5; } 
} 
}
} .comments-area {
margin-top: var(--space-xl); 
padding-top: var(--space-lg); 
border-top: 1px solid var(--color-border);
.comments-title { 
font-size: 1.5rem; 
margin-bottom: var(--space-lg); 
}
.comment-list, .children { 
list-style: none; 
padding-left: 0; 
} .children { 
margin-left: var(--space-lg); 
position: relative; 
&::before { 
content: ""; 
position: absolute; 
left: calc(-1 * var(--space-md)); 
top: 0; 
bottom: 0; 
width: 2px; 
background-color: var(--color-border); 
} 
} .comment-body { 
padding: var(--space-md) 0; 
border-bottom: 1px solid var(--color-border); 
display: flex;
flex-direction: column;
gap: 0.5rem;
} .comment-author.vcard {
display: flex;
align-items: center;
gap: var(--space-sm);
position: relative;
.avatar {
border-radius: 50%;
display: block;
background-color: var(--color-surface);
}
.fn {
font-style: normal;
font-weight: 600;
color: var(--color-heading);
a { color: var(--color-heading); &:hover { color: var(--color-accent); } }
}
.says {
color: var(--color-muted);
font-size: 0.95rem;
display: inline;
}
} .comment-meta.commentmetadata {
margin-top: -0.25rem;
a {
font-size: 0.875rem;
color: var(--color-muted);
&:hover { color: var(--color-accent); text-decoration: none; }
}
} p {
margin-bottom: 0.25rem;
color: var(--color-text);
font-size: 1rem;
line-height: 1.6;
} .reply {
align-self: flex-start;
} .comment-respond {
margin-top: var(--space-xl); 
background-color: var(--color-surface); 
padding: var(--space-lg); 
border-radius: var(--radius-lg);
.comment-reply-title { 
font-size: 1.25rem; 
font-family: var(--font-serif);
font-weight: 700;
margin-bottom: var(--space-md); 
small a {
font-family: var(--font-sans);
font-size: 0.875rem;
margin-left: var(--space-sm);
font-weight: 500;
}
}
#commentform { 
display: flex; 
flex-direction: column; 
gap: var(--space-sm); 
.comment-notes, .required-field-message {
font-size: 0.875rem;
color: var(--color-muted);
margin-bottom: 0.25rem;
}
label {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-heading);
margin-bottom: 0.25rem;
}
textarea, input[type="text"], input[type="email"], input[type="url"] { 
width: 100%; 
padding: 0.75rem var(--space-sm); 
border: 1px solid var(--color-border); 
border-radius: var(--radius-md); 
font-size: 1rem; 
font-family: var(--font-sans);
background-color: var(--color-bg); 
transition: border-color 0.2s;
&:focus { outline: none; border-color: var(--color-accent); } 
} .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.25rem;
input[type="checkbox"] {
margin-top: 0.35rem;
}
label {
font-size: 0.875rem;
color: var(--color-muted);
font-weight: 500;
line-height: 1.4;
}
}
.form-submit {
margin-top: var(--space-xs);
#submit {
align-self: flex-start; }
}
}
}
} .searchform {
width: 100%; .screen-reader-text {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
} > div {
display: flex;
gap: var(--space-xs);
width: 100%;
} input[type="text"] {
flex: 1;
padding: 0.625rem var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 1rem;
font-family: var(--font-sans);
background-color: var(--color-bg);
color: var(--color-text);
transition: border-color 0.2s ease;
&:focus { 
outline: none; 
border-color: var(--color-accent); 
}
}
} .site-footer { 
text-align: center; 
padding: var(--space-lg) 0; 
color: var(--color-muted); 
font-size: 0.875rem; 
border-top: 1px solid var(--color-border); 
margin-top: var(--space-xl); 
} @media (max-width: 768px) {
:root { 
--space-md: 1rem; --space-lg: 1.75rem; 
--space-xl: 2.5rem; 
} body {
font-size: 1rem; } h1 { 
font-size: 2rem; } .post-item {
padding: var(--space-sm); gap: 0.5rem;
.post-item-title { 
font-size: 1.35rem; }
.post-item-meta {
font-size: 0.8rem;
}
} .site-header {
margin-bottom: var(--space-lg);
.header-container { 
flex-direction: column; 
gap: var(--space-xs); 
}
} .comments-area {
.comments-title {
font-size: 1.25rem;
} .comment-list .children { 
margin-left: var(--space-sm); 
&::before { display: none; } } .comment-respond {
padding: var(--space-sm);
}
}
}