@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Rubik:ital,wght@0,400;0,500;1,400&display=swap');

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

body {
    margin: 0;
    background: #fff;
    color: #2b2b2b;
    font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.625;
}

a { color: #2b2b2b; text-decoration: none; }
a:hover { color: #fab526; }

/* ── Header ─────────────────────────────────────────── */
.site-header {
    background: #fff;
    text-align: center;
    padding: 24px 20px 0;
}

.site-title {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    margin: 0 0 20px;
}
.site-title:hover { color: #000; }

/* ── Nav ─────────────────────────────────────────────── */
.site-nav {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: center;
    padding: 10px 0;
}

.site-nav a {
    color: #2b2b2b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 18px;
    text-decoration: none;
}
.site-nav a:hover { color: #fab526; }

/* ── Banner ──────────────────────────────────────────── */
.site-banner {
    max-width: 1160px;
    width: 90%;
    margin: 24px auto 0;
}
.site-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Layout ──────────────────────────────────────────── */
.content-wrap {
    max-width: 1160px;
    width: 90%;
    margin: 0 auto;
    padding: 32px 0 40px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.main-content { flex: 1; min-width: 0; }

/* ── Post cards ──────────────────────────────────────── */
.post-card {
    border: 1px solid #000;
    border-radius: 3px;
    padding: 31px;
    margin-bottom: 30px;
    overflow: hidden;
}

.post-thumbnail {
    margin: -31px -31px 22px;
}
.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px 3px 0 0;
}

.entry-title {
    font-family: 'Rubik', sans-serif;
    font-size: 30px;
    font-weight: 500;
    margin: 0 0 10px;
    line-height: 1.3;
}
.entry-title a { color: #000; text-decoration: none; }
.entry-title a:hover { color: #fab526; }

.post-data-divider {
    height: 1px;
    background: #fab526;
    margin-bottom: 8px;
}

.entry-meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 16px;
}
.entry-meta a { color: #555; }
.entry-meta a:hover { color: #fab526; }

.entry-content {
    font-size: 16px;
    line-height: 1.625;
}
.entry-content p { margin: 0 0 16px; }
.entry-content p:last-child { margin-bottom: 0; }

.entry-content img { max-width: 100%; height: auto; }

/* WP block gallery */
.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 16px 0;
}
.wp-block-gallery .wp-block-image {
    flex: 1 1 calc(50% - 4px);
    margin: 0;
}
.wp-block-gallery .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Continue reading */
.read-more-wrap {
    text-align: center;
    margin-top: 20px;
}
.blogpost-button {
    display: inline-block;
    background: #fab526;
    color: #fff;
    padding: 15px 25px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.blogpost-button:hover { background: #e0a315; color: #fff; }

/* Back link (single post) */
.back-link { margin-top: 24px; }
.back-link a { color: #fab526; font-size: 14px; }
.back-link a:hover { text-decoration: underline; }

/* Tags */
.post-tags { margin: 16px 0 0; }
.tag {
    display: inline-block;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #555;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 3px;
    margin: 2px 3px 2px 0;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar { width: 320px; flex-shrink: 0; }

.widget { margin-bottom: 28px; }

.sidebar-title-border {
    border-bottom: 2px solid #000;
    margin-bottom: 10px;
}
.widget-title {
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #2b2b2b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}

.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { margin-bottom: 8px; font-size: 14px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.widget li:last-child { border-bottom: none; }
.widget a { color: #2b2b2b; }
.widget a:hover { color: #fab526; }

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
    background: #000;
    color: #aaa;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    margin-top: 10px;
}
.site-footer a { color: #aaa; }
.site-footer a:hover { color: #fab526; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .content-wrap { flex-direction: column; width: 95%; padding: 20px 0 30px; }
    .sidebar { width: 100%; }
    .site-title { font-size: 32px; }
    .entry-title { font-size: 22px; }
    .post-thumbnail { margin: -20px -20px 16px; }
    .post-card { padding: 20px; }
}