/*
 * MyNotes Theme for BSSG
 * Quiet, warm, text-first journal aesthetic.
 */

@import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&family=Source+Sans+3:wght@400;500;600&display=swap");

:root {
    --bg: #1c1917;
    --bg-soft: #221e1b;
    --surface: #26211e;
    --text: #e8e0d4;
    --text-soft: #d2c7b5;
    --muted: #afa08b;
    --accent: #c89452;
    --accent-strong: #ddb175;
    --accent-subtle: rgba(200, 148, 82, 0.32);
    --border: #4a4037;
    --quote-bg: #24201d;
    --quote-border: #a7773d;
    --code-bg: #171411;
    --code-text: #f1e8db;
    --code-border: #3d342c;
    --shadow-soft: 0 3px 16px rgba(0, 0, 0, 0.24);
    --content-width: 700px;
    --font-body: "Literata", Georgia, "Times New Roman", serif;
    --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f5f0e8;
        --bg-soft: #f1e9de;
        --surface: #fcf8f1;
        --text: #2c2520;
        --text-soft: #3b322c;
        --muted: #726459;
        --accent: #a96d2f;
        --accent-strong: #8d5520;
        --accent-subtle: rgba(169, 109, 47, 0.26);
        --border: #d9cdbd;
        --quote-bg: #f3ebdf;
        --quote-border: #b67a3f;
        --code-bg: #2a241f;
        --code-text: #f5ecdd;
        --code-border: #3a3129;
        --shadow-soft: 0 2px 12px rgba(60, 42, 22, 0.12);
    }
}

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

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

html {
    font-size: 19px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 8%, rgba(201, 150, 91, 0.1), transparent 34%),
        linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
    font-family: var(--font-body);
    line-height: 1.7;
}

::selection {
    background: var(--accent-subtle);
    color: var(--text);
}

.container {
    max-width: calc(var(--content-width) + 2.8rem);
    margin: 0 auto;
    padding: 2.2rem 1.4rem 3.2rem;
}

header {
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.3rem;
    padding-bottom: 1.15rem;
}

.site-title,
header h1 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
    color: var(--accent-strong);
}

header p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.5;
}

nav {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
}

nav a {
    display: inline-block;
    padding: 0.28rem 0.1rem;
    color: var(--text-soft);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-bottom: 1px solid transparent;
}

nav a:hover,
nav a:focus {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-subtle);
}

main {
    max-width: var(--content-width);
    margin: 0 auto;
    min-height: 68vh;
}

article {
    margin-bottom: 2.2rem;
}

article.post,
article.page {
    padding-bottom: 1rem;
}

.posts-list article {
    margin: 0;
    padding: 0 0 1.55rem;
    border-bottom: 1px solid var(--border);
}

.posts-list article + article {
    margin-top: 1.55rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.3;
    margin: 1.45rem 0 0.8rem;
    letter-spacing: 0.01em;
    font-weight: 600;
}

h1 {
    font-size: clamp(1.95rem, 3.3vw, 2.45rem);
}

h2 {
    font-size: clamp(1.55rem, 2.7vw, 1.92rem);
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.48rem);
}

article.post > h1,
article.page > h1,
.posts-list h2,
.posts-list h3 {
    margin-top: 0;
}

p,
ul,
ol {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

li + li {
    margin-top: 0.38rem;
}

a {
    color: var(--accent);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    text-decoration-color: rgba(200, 148, 82, 0.55);
    transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

a:hover,
a:focus {
    color: var(--accent-strong);
    text-decoration-color: rgba(200, 148, 82, 0.95);
}

.page-meta {
    margin-bottom: 1rem;
}

.meta {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.83rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reading-time {
    margin-top: 0.28rem;
}

.summary {
    color: var(--text-soft);
    margin-top: 0.6rem;
}

.posts-list .summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-content {
    margin-top: 0.75rem;
}

.featured-image,
.index-image,
.tag-image,
.archive-image,
.author-image {
    margin: 1rem 0 1.05rem;
}

.index-image {
    display: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: var(--shadow-soft);
}

.image-caption,
figcaption {
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.5;
}

blockquote {
    margin: 1.5rem 0;
    padding: 0.9rem 1rem;
    background: var(--quote-bg);
    border-left: 3px solid var(--quote-border);
    color: var(--text-soft);
    font-style: italic;
}

pre,
code {
    font-family: var(--font-mono);
    font-size: 0.83rem;
}

code {
    color: var(--code-text);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 4px;
    padding: 0.08rem 0.3rem;
}

pre {
    margin: 1.2rem 0;
    color: var(--code-text);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 6px;
    padding: 0.9rem 0.95rem;
    overflow-x: auto;
}

pre code {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

hr {
    border: 0;
    margin: 2.2rem 0;
    text-align: center;
}

hr::before {
    content: "\00b7\00b7\00b7";
    color: var(--muted);
    letter-spacing: 0.6rem;
    font-size: 1rem;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.36rem;
    margin-top: 1.2rem;
}

.tags a,
.tags-list a {
    display: inline-block;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.14rem 0.52rem;
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}

.tags a:hover,
.tags a:focus,
.tags-list a:hover,
.tags-list a:focus {
    color: var(--accent-strong);
    border-color: var(--accent-subtle);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tag-count {
    color: var(--muted);
}

.pagination {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-ui);
}

.pagination a {
    display: inline-block;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.16rem 0.62rem;
    text-decoration: none;
    font-size: 0.78rem;
}

.pagination a:hover,
.pagination a:focus {
    color: var(--accent-strong);
    border-color: var(--accent-subtle);
}

.page-info {
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.related-posts {
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--border);
}

.related-posts h3 {
    margin-top: 0;
    font-size: 1.1rem;
}

.related-posts-list {
    display: grid;
    gap: 0.8rem;
}

.related-post {
    border-left: 2px solid var(--quote-border);
    background: color-mix(in srgb, var(--quote-bg) 85%, transparent);
    padding: 0.55rem 0.72rem;
    border-radius: 4px;
}

.related-post h4 {
    margin: 0 0 0.25rem;
    font-size: 0.98rem;
}

.related-post p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
}

th,
td {
    border: 1px solid var(--border);
    padding: 0.46rem 0.56rem;
}

th {
    text-align: left;
    font-family: var(--font-ui);
    font-size: 0.79rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

footer {
    max-width: var(--content-width);
    margin: 2.5rem auto 0;
    padding-top: 0.95rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.77rem;
    line-height: 1.5;
}

footer p {
    margin: 0.34rem 0;
}

footer p:last-child {
    display: none;
}

footer a {
    color: var(--accent);
}

footer a:hover,
footer a:focus {
    color: var(--accent-strong);
}

@media (max-width: 760px) {
    html {
        font-size: 17px;
    }

    .container {
        padding: 1.4rem 1rem 2.4rem;
    }

    header {
        margin-bottom: 1.7rem;
        padding-bottom: 0.95rem;
    }

    nav {
        gap: 0.24rem 0.6rem;
    }

    nav a {
        padding: 0.35rem 0.04rem;
        font-size: 0.8rem;
        letter-spacing: 0.06em;
    }

    article {
        margin-bottom: 1.8rem;
    }

    .posts-list article {
        padding-bottom: 1.2rem;
    }
}

@media (max-width: 520px) {
    html {
        font-size: 16px;
    }

    .container {
        padding: 1.1rem 0.82rem 2rem;
    }

    nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem 0.55rem;
    }

    nav a {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .site-title,
    header h1 {
        font-size: clamp(1.72rem, 8.4vw, 2.2rem);
    }

    .meta,
    .pagination a,
    .page-info {
        font-size: 0.76rem;
        letter-spacing: 0.02em;
    }
}