/* Blog pages (/blog, /blog/<slug>) - Royal CEO palette, same type as the homepage. */
:root {
  --emerald: #103D35; --emerald-deep: #0c2f29; --gold: #C6A667; --gold-ink: #9a7d3f;
  --ivory: #F8F4EA; --rose: #E6C5CF; --charcoal: #242424;
  --display: "Cormorant Garamond", Georgia, serif; --body: "Jost", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ivory); color: var(--charcoal); font-family: var(--body); line-height: 1.6; -webkit-text-size-adjust: 100%; }
a { color: var(--emerald); }
img { max-width: 100%; height: auto; }

/* header / footer */
.bh { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 5vw, 56px); background: color-mix(in srgb, var(--ivory) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.bh__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bh__brand img { width: 52px; height: 44px; object-fit: contain; }
.bh__brand span { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); white-space: nowrap; }
.bh__nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); font-size: .92rem; }
.bh__nav a { text-decoration: none; color: #4a5753; }
.bh__nav a:hover { color: var(--emerald); }
.bh__cta { background: var(--gold); color: var(--emerald) !important; font-weight: 600; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.bf { background: var(--emerald-deep); color: color-mix(in srgb, var(--ivory) 75%, transparent); font-size: .85rem; padding: 28px 0; margin-top: 72px; }
.bf__in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.bf a { color: var(--gold); text-decoration: none; }

.eyebrow { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); text-decoration: none; }

/* list */
.bl-hero { max-width: 760px; margin: 0 auto; padding: clamp(48px, 8vw, 88px) clamp(16px, 5vw, 32px) 24px; text-align: center; }
.bl-hero h1 { font-family: var(--display); font-weight: 600; color: var(--emerald); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin: 12px 0 0; }
.bl-hero p { color: #555; margin: 14px 0 0; }
.bl-grid { max-width: 1120px; margin: 24px auto 0; padding: 0 clamp(16px, 5vw, 48px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 6px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 61, 53, .1); }
.card__img { aspect-ratio: 16 / 10; background: var(--emerald); display: grid; place-items: center; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__ph { font-family: var(--display); font-size: 3rem; color: var(--gold); }
.card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card time { font-size: .78rem; color: var(--gold-ink); letter-spacing: .04em; }
.card h2 { font-family: var(--display); font-weight: 600; color: var(--emerald); font-size: 1.55rem; line-height: 1.15; margin: 0; }
.card p { margin: 4px 0 0; color: #555; font-size: .95rem; flex: 1; }
.card__more { margin-top: 10px; font-weight: 600; font-size: .88rem; color: var(--emerald); }
.empty { grid-column: 1 / -1; text-align: center; color: #777; padding: 40px 0; }
.pager { max-width: 1120px; margin: 32px auto 0; padding: 0 clamp(16px, 5vw, 48px); display: flex; justify-content: space-between; }
.pager a { font-weight: 600; text-decoration: none; }

/* article */
.draft-banner { background: var(--rose); color: var(--emerald); text-align: center; font-weight: 600; font-size: .85rem; padding: 10px 16px; letter-spacing: .04em; }
.post { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) clamp(16px, 5vw, 32px) 0; }
.post__head { text-align: center; }
.post__head h1 { font-family: var(--display); font-weight: 600; color: var(--emerald); font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.05; margin: 12px 0 10px; overflow-wrap: anywhere; }
.post__head time { color: var(--gold-ink); font-size: .9rem; }
.post__cover { display: block; width: 100%; border-radius: 6px; margin: 32px 0 8px; }
.post__body { font-size: 1.08rem; line-height: 1.8; color: #2f2f2f; overflow-wrap: anywhere; }
.post__body h2, .post__body h3 { font-family: var(--display); color: var(--emerald); font-weight: 600; line-height: 1.15; margin: 1.8em 0 .4em; }
.post__body h2 { font-size: 2rem; } .post__body h3 { font-size: 1.55rem; }
.post__body img { display: block; border-radius: 6px; margin: 1.4em auto; }
.post__body blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold); font-family: var(--display); font-size: 1.4rem; font-style: italic; color: var(--emerald); }
.post__body a { color: var(--emerald); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.post__body .ql-align-center { text-align: center; } .post__body .ql-align-right { text-align: right; } .post__body .ql-align-justify { text-align: justify; }
.post__body li[data-list="bullet"] { list-style-type: disc; }
.post__body pre { background: #f0ebe0; padding: 14px; border-radius: 4px; overflow-x: auto; }
.rz-video { position: relative; aspect-ratio: 16 / 9; margin: 1.6em 0; border-radius: 6px; overflow: hidden; background: #000; }
.rz-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post__cta { margin: 48px 0 0; padding: 28px; text-align: center; background: var(--emerald); color: var(--ivory); border-radius: 6px; }
.post__cta p { font-family: var(--display); font-size: 1.7rem; margin: 0 0 14px; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; padding: 12px 24px; border-radius: 999px; background: var(--gold); color: var(--emerald); }
.post__more { max-width: 760px; margin: 48px auto 0; padding: 0 clamp(16px, 5vw, 32px); }
.post__more h2 { font-family: var(--display); color: var(--emerald); font-weight: 600; font-size: 1.6rem; }
.post__more ul { list-style: none; padding: 0; margin: 0; }
.post__more li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.post__more li a { text-decoration: none; font-weight: 500; }
.post__more time { color: var(--gold-ink); font-size: .85rem; white-space: nowrap; }

@media (max-width: 640px) {
  .bh__brand span { font-size: 1rem; }
  .bh__nav a:first-child { display: none; }
  .post__more li { flex-direction: column; gap: 2px; }
}