/* ── Variables ─────────────────────────────────────────── */
:root {
    --cream:     #f5f0e4;
    --parchment: #e8dfc8;
    --gold:      #b8973a;
    --gold-lt:   #d4b05a;
    --green:     #1c3a28;
    --green-md:  #2e5940;
    --burgundy:  #6b1a2a;
    --ink:       #1a1208;
    --muted:     #9a8a6a;
    --border:    rgba(184,151,58,0.25);
    --font-disp: 'IM Fell English', Georgia, serif;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --ease:      cubic-bezier(0.4,0,0.2,1);
}

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

body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.75;
    min-height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b8973a' stroke-width='0.4' opacity='0.1'%3E%3Cpath d='M40 0 Q55 20 40 40 Q25 20 40 0z'/%3E%3Cpath d='M0 40 Q20 55 40 40 Q20 25 0 40z'/%3E%3Cpath d='M80 40 Q60 55 40 40 Q60 25 80 40z'/%3E%3Cpath d='M40 80 Q55 60 40 40 Q25 60 40 80z'/%3E%3C/g%3E%3C/svg%3E");
}

.hidden { display: none !important; }

/* ── Header ──────────────────────────────────────────── */
#site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245,240,228,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s;
}

.header-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    font-family: var(--font-disp);
    font-size: 1.3rem;
    color: var(--green);
    text-decoration: none;
    letter-spacing: 0.05em;
}

.header-right { position: relative; }

/* ── Login button & popover ──────────────────────────── */
.login-btn {
    background: none;
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--muted);
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.login-btn:hover { color: var(--green); border-color: var(--gold); }

.login-popover {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    background: var(--cream);
    border: 1px solid rgba(184,151,58,0.4);
    padding: 1.1rem 1.2rem;
    width: 230px;
    box-shadow: 0 8px 24px rgba(26,18,8,0.15);
    z-index: 200;
}
.login-popover input {
    width: 100%;
    background: var(--parchment);
    border: 1px solid rgba(184,151,58,0.4);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.5rem 0.7rem;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 0.6rem;
}
.login-popover input:focus { border-color: var(--green); }
.login-popover button {
    width: 100%;
    background: var(--green);
    color: var(--gold-lt);
    border: none;
    font-family: var(--font-disp);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    padding: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}
.login-popover button:hover { background: var(--green-md); }
#pw-error {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--burgundy);
    min-height: 1.2em;
}

/* ── Admin Header ───────────────────────────────────── */
.admin-status {
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
    margin-right: 1rem;
    letter-spacing: 0.05em;
}

.logout-btn-header {
    background: none;
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--burgundy);
    padding: 0.25rem 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.logout-btn-header:hover { border-color: var(--burgundy); background: rgba(107, 26, 42, 0.05); }

/* ── Private panel ───────────────────────────────────── */
#private-panel {
    margin-bottom: 2.6rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid var(--border);
    animation: fadeSlideIn 0.3s var(--ease);
}

@keyframes fadeSlideIn {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}

.private-panel-label {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

.private-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.priv-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    background: var(--parchment);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--ink);
    transition: background 0.18s, border-color 0.18s;
}
.priv-link:hover { background: #ede4ce; border-color: rgba(184,151,58,0.5); }
.priv-link.muted { opacity: 0.55; pointer-events: none; }

.priv-icon {
    font-size: 1.05rem;
    color: var(--gold);
    flex-shrink: 0;
    width: 1.4rem;
    text-align: center;
}

.priv-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.priv-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--green);
    line-height: 1.2;
}

.priv-desc {
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
}

/* ── Blog layout ─────────────────────────────────────── */
.blog-main { padding: 3.5rem 0 5rem; }
.blog-container { max-width: 680px; margin: 0 auto; padding: 0 2rem; }

/* ── New post button ─────────────────────────────────── */
#new-post-wrap { margin-bottom: 2.5rem; }
.new-post-btn {
    background: none;
    border: 1px dashed rgba(184,151,58,0.5);
    font-family: var(--font-disp);
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s, border-color 0.2s;
}
.new-post-btn:hover { color: var(--green); border-color: var(--gold); }

/* ── Post editor ─────────────────────────────────────── */
.post-editor {
    border: 1px solid rgba(184,151,58,0.35);
    background: var(--parchment);
    padding: 1.5rem 1.6rem;
    margin-bottom: 2.5rem;
}
.editor-title {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-disp);
    font-size: 1.5rem;
    color: var(--green);
    padding: 0.3rem 0 0.6rem;
    outline: none;
    margin-bottom: 0.9rem;
}
.editor-body {
    width: 100%;
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--ink);
    resize: vertical;
    outline: none;
    line-height: 1.7;
    min-height: 120px;
}
.editor-actions { display: flex; gap: 0.7rem; margin-top: 1rem; }
.btn-pub {
    padding: 0.5rem 1.4rem;
    background: var(--green);
    color: var(--gold-lt);
    border: none;
    font-family: var(--font-disp);
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-pub:hover { background: var(--green-md); }

.btn-img-upload {
    padding: 0.5rem 1.1rem;
    background: var(--parchment);
    color: var(--green);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-img-upload:hover { background: #ede4ce; border-color: var(--gold); }

.btn-cancel-edit {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s;
}
.btn-cancel-edit:hover { color: var(--burgundy); }

/* ── Rendered Markdown ────────────────────────────────── */
.rendered-markdown h1, .rendered-markdown h2, .rendered-markdown h3 {
    font-family: var(--font-disp);
    color: var(--green);
    margin: 1.5rem 0 0.8rem;
    line-height: 1.2;
}
.rendered-markdown p { margin-bottom: 1.2rem; }
.rendered-markdown ul, .rendered-markdown ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}
.rendered-markdown li { margin-bottom: 0.4rem; }
.rendered-markdown blockquote {
    border-left: 3px solid var(--gold);
    padding-left: 1.2rem;
    font-style: italic;
    color: var(--muted);
    margin: 1.5rem 0;
}
.rendered-markdown code {
    background: rgba(184,151,58,0.1);
    padding: 0.2rem 0.4rem;
    font-size: 0.9em;
    border-radius: 3px;
}
.rendered-markdown pre {
    background: var(--ink);
    color: var(--cream);
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}
.rendered-markdown pre code { background: none; padding: 0; color: inherit; }

.rendered-markdown img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border: 1px solid var(--border);
    padding: 0.5rem;
    background: white;
    box-shadow: 0 4px 12px rgba(26,18,8,0.08);
}

/* ── Blog post ───────────────────────────────────────── */
.post {
    padding-bottom: 2.8rem;
    margin-bottom: 2.8rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.post:last-child { border-bottom: none; }

.post-date {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.post-title {
    font-family: var(--font-disp);
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--green);
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
}

.post-body {
    color: var(--ink);
    white-space: pre-wrap;
    font-size: 1.1rem;
    line-height: 1.78;
}

/* Admin post controls */
.post-admin {
    display: flex;
    gap: 1rem;
    margin-top: 1.1rem;
    align-items: center;
}
.btn-edit-post {
    background: none;
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--muted);
    padding: 0.25rem 0.8rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.btn-edit-post:hover { color: var(--green); border-color: var(--gold); }
.btn-del-post {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.8rem;
    color: #c0aa88;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
    padding: 0;
}
.btn-del-post:hover { color: var(--burgundy); }

/* ── Loading / empty ─────────────────────────────────── */
.posts-loading { color: var(--muted); font-style: italic; text-align: center; padding: 4rem 0; }
.posts-empty   { color: var(--muted); font-style: italic; text-align: center; padding: 4rem 0; }

/* ── Footer ──────────────────────────────────────────── */
.blog-footer {
    border-top: 1px solid var(--border);
    padding: 1.8rem 0;
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.04em;
}

@media (max-width: 520px) {
    .post-title { font-size: 1.5rem; }
    .header-inner { padding: 0.9rem 1.2rem; }
    .blog-container { padding: 0 1.2rem; }
}