:root { --gold:#ffd700; --text:#f5f5f5; --muted:rgba(255,255,255,.75); --maxw:72ch; }
body { margin:0; background:#0b0b0b; color:var(--text); }
.blog-nav { position: sticky; top:0; z-index:10; display:flex; gap:12px; align-items:center; padding:14px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.65)); border-bottom:1px solid rgba(255,255,255,.08); }
.blog-nav a { color:var(--text); text-decoration:none; font-weight:700; }
.blog-nav a:hover { color:var(--gold); }

.post { max-width: calc(var(--maxw) + 6vw); margin: clamp(24px,4vw,54px) auto; padding: 0 3vw; }
.post-hero { width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#111;
    box-shadow: 0 14px 36px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); }
.post-hero img { width:100%; height:100%; object-fit:cover; display:block; }
h1 { font-size: clamp(1.6rem, 2.4vw + 1rem, 2.6rem); margin: 18px 0 8px; color:#fff; }
h2.sub { margin-top: 6px; color:#fff; font-weight:700; opacity:.9; }
.meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--muted);
    border-bottom:1px dashed rgba(255,255,255,.15); padding-bottom:14px; margin-bottom:22px; }
.dot { width:4px; height:4px; border-radius:50%; background:var(--muted); }

.prose { font-size: clamp(1rem, .3vw + 1rem, 1.125rem); line-height:1.68; }
.prose h2, .prose h3 { color:#fff; margin: 1.6em 0 .6em; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin:.9em 0; }
.prose ul { padding-left:1.1rem; }
.prose a { color: var(--gold); text-decoration: underline; }

.tags { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.tag { font-size:.85rem; color:#000; background:var(--gold); padding:4px 8px; border-radius:999px; font-weight:700; }

.foot-nav { display:flex; justify-content: space-between; gap:10px; margin-top: 28px;
    border-top:1px dashed rgba(255,255,255,.15); padding-top:18px; }
.foot-nav a { color:#000; background:var(--gold); border-radius:10px; padding:10px 14px; text-decoration:none;
    font-weight:800; box-shadow:0 10px 22px rgba(255,215,0,.18); }
.foot-nav a:hover { filter:brightness(1.05); }
/* Match media-button’s white-on-hover effect for blog buttons */
.foot-nav a,
.card .cta {
position: relative;
overflow: hidden;
z-index: 1;
/* keep your existing look */
background: #FFD700;
color: #000;
text-decoration: none;
border-radius: 10px;
font-weight: 800;
box-shadow: 0 10px 22px rgba(255,215,0,.18);
transition: filter .2s ease, transform .12s ease, box-shadow .2s ease;
}

/* white flip overlay */
.foot-nav a::before,
.card .cta::before {
content: '';
position: absolute;
inset: 0;
background: #FFFFFF;
transform: perspective(500px) rotateX(-90deg);
transform-origin: top;
transition: transform .3s ease;
z-index: -1;
}

/* on hover/focus: reveal white and keep black text like .media-button */
.foot-nav a:hover::before,
.foot-nav a:focus-visible::before,
.card .cta:hover::before,
.card .cta:focus-visible::before {
transform: perspective(500px) rotateX(0deg);
}
.foot-nav a:hover,
.foot-nav a:focus-visible,
.card .cta:hover,
.card .cta:focus-visible {
color: #000;
text-shadow: 0 0 2px rgba(255,255,255,0.5);
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(255,215,0,.24);
filter: none;
}

/* Tags: make them “buttony” + hoverable — keep text BLACK always */
.tags .tag {
position: relative;
z-index: 0; /* create stacking context so ::before can sit behind text */
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
background: #FFD700;
color: #000 !important;             /* force black text */
font-weight: 700;
overflow: hidden;
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
cursor: pointer; /* remove if you want default cursor */
}
/* Ensure any nested text/icons also stay black */
.tags .tag * { color: #000 !important; }

/* If tags are anchors, override global link colors */
.tags a.tag,
.tags a.tag:hover,
.tags a.tag:focus-visible { color: #000 !important; text-decoration: none; }

/* White flip overlay sits BEHIND text */
.tags .tag::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: #FFFFFF;
transform: perspective(500px) rotateX(-90deg);
transform-origin: top;
transition: transform .3s ease;
z-index: -1; /* keep below the text/content */
}

/* Reveal white background on hover/focus */
.tags .tag:hover::before,
.tags .tag:focus-visible::before {
transform: perspective(500px) rotateX(0deg);
}

/* Lift on hover, but keep text black */
.tags .tag:hover,
.tags .tag:focus-visible {
color: #000 !important;
text-shadow: 0 0 2px rgba(255,255,255,0.5);
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(255,215,0,.24);
filter: none;
}