/* Deep Garden Archive Theme */

:root {
--bg-deep: #10180f;
--bg-leaf: #172415;
--bg-card: rgba(24, 38, 22, 0.92);


--text-main: #f4ead2;
--text-soft: #d8c7a5;
--text-muted: #a89175;

--flower-pink: #e989aa;
--flower-rose: #bf5f7c;
--gold: #d7b46a;
--moss: #7f9f6a;
--vine: #324b2d;

--shadow: rgba(0, 0, 0, 0.45);


}

/* Page */

body {
font-family: Georgia, "Times New Roman", serif;
line-height: 1.7;
color: var(--text-main);
max-width: 850px;
margin: 0 auto;
padding: 30px 20px;


background:
    radial-gradient(circle at top left, rgba(233, 137, 170, 0.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(127, 159, 106, 0.18), transparent 35%),
    linear-gradient(135deg, #0b120a, var(--bg-deep) 45%, #1b2616);


}

/* Soft garden texture overlay */

body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.18;


background-image:
    repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03) 0,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px,
        transparent 12px
    );


}

/* Header */

header {
text-align: center;
margin-bottom: 45px;
padding: 35px 25px;


background: rgba(14, 25, 12, 0.82);
border: 1px solid rgba(215, 180, 106, 0.45);
border-radius: 28px 28px 8px 8px;

box-shadow:
    0 20px 45px var(--shadow),
    inset 0 0 35px rgba(215, 180, 106, 0.08);


}

h1 {
font-size: 2.6em;
line-height: 1.1;
margin: 0 0 12px;


color: var(--flower-pink);
text-shadow:
    0 0 8px rgba(233, 137, 170, 0.45),
    0 3px 10px rgba(0, 0, 0, 0.7);


}

header p {
margin: 0;
color: var(--text-soft);
font-style: italic;
}

/* Archive List */

.archive-list {
list-style: none;
padding: 0;
margin: 0;
}

/* Archive Cards */

.archive-item {
position: relative;
margin-bottom: 28px;
padding: 24px 26px;


background: var(--bg-card);
border: 1px solid rgba(127, 159, 106, 0.42);
border-left: 5px solid var(--flower-rose);
border-radius: 18px;

box-shadow:
    0 12px 28px var(--shadow),
    inset 0 0 22px rgba(255, 255, 255, 0.03);


}

.archive-item::before {
content: "✦";
position: absolute;
top: 18px;
right: 22px;


color: var(--gold);
opacity: 0.7;
font-size: 1.1rem;
```

}

.archive-item:hover {
transform: translateY(-3px);
border-color: rgba(233, 137, 170, 0.7);
box-shadow:
0 18px 34px rgba(0, 0, 0, 0.55),
0 0 18px rgba(233, 137, 170, 0.14);
}

.archive-item,
.article-title,
.tags {
transition: 0.25s ease;
}

/* Titles */

.archive-item h2 {
margin: 0 0 8px;
}

.article-title {
color: var(--gold);
font-size: 1.35em;
text-decoration: none;
}

.article-title:hover {
color: var(--flower-pink);
text-shadow: 0 0 8px rgba(233, 137, 170, 0.45);
}

/* Meta Info */

.meta {
font-size: 0.95em;
color: var(--text-muted);
margin-top: 6px;
}

.separator {
margin: 0 8px;
color: var(--moss);
}

/* Tags */

.tags {
display: inline-block;
background: rgba(233, 137, 170, 0.13);
color: var(--flower-pink);


border: 1px solid rgba(233, 137, 170, 0.35);
padding: 3px 10px;
border-radius: 999px;

font-size: 0.8em;
letter-spacing: 0.04em;
text-transform: uppercase

}

.tags:hover {
background: rgba(233, 137, 170, 0.22);
}

/* Keyboard Accessibility */

a:focus-visible {
outline: 2px solid var(--flower-pink);
outline-offset: 4px;
border-radius: 6px;
}

/* Mobile */

@media (max-width: 600px) {
body {
padding: 18px 14px;
}


header {
    padding: 28px 18px;
}

h1 {
    font-size: 2em;
}

.archive-item {
    padding: 20px;
}

.article-title {
    font-size: 1.2em;
}


}