.nav-links a[aria-current="page"] { color: var(--pink); }
.blog-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; padding-block: 70px; }
.blog-hero h1 { margin-top: 24px; font-size: clamp(46px, 5.5vw, 74px); line-height: 1.08; letter-spacing: -.045em; }
.blog-hero h1 span { color: var(--cyan); }
.blog-lead { max-width: 510px; margin-top: 26px; color: var(--muted); font-size: 21px; }
.blog-author { margin-top: 25px; color: var(--muted); font-size: 15px; }
.blog-author a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.blog-cover { position: relative; max-width: 390px; width: 100%; justify-self: center; padding: 38px 34px 28px 44px; border: 1px solid var(--line); border-left: 8px solid var(--pink); border-radius: 4px 18px 18px 4px; corner-shape: squircle; background: linear-gradient(90deg, #0003, transparent 12%), url('../content/brand-dots.svg'), var(--surface); box-shadow: 10px 10px 0 -2px var(--bg), 10px 10px 0 -1px var(--line); }
.blog-cover-stack { position: relative; isolation: isolate; max-width: 390px; width: 100%; justify-self: center; }
.blog-cover-stack::before { content: ""; position: absolute; z-index: -1; inset: 9px -11px -11px 9px; border: 1px solid var(--line); border-radius: 4px 18px 28px 4px; corner-shape: squircle; background: var(--bg); }
.blog-cover-stack .blog-cover { max-width: none; box-shadow: none; }
.cover-mascots { display: flex; align-items: end; gap: 12px; margin-top: 26px; }
.cover-mascots img:first-child { transform: rotate(-9deg); }
.cover-mascots img:last-child { transform: rotate(9deg); }
.cover-title { margin-top: 24px; font: 500 clamp(35px, 4vw, 49px)/1.12 var(--display); letter-spacing: -.035em; }
.cover-title span { color: var(--cyan); }
.cover-rule { width: 50px; height: 4px; background: var(--pink); margin-block: 28px; }
.cover-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.blog-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 35px; align-items: start; padding-block: 55px 90px; border-top: 1px solid var(--line); }
.blog-contents { position: static; }
.blog-contents ol { list-style: none; margin: 20px 0 0; padding: 0; }
.blog-contents li + li { border-top: 1px solid var(--line); }
.blog-contents a { display: flex; gap: 15px; padding-block: 14px; font-size: 16px; }
.blog-contents a:hover { color: var(--mint); }
.blog-contents a span { color: var(--pink); font-size: 13px; padding-top: 3px; }
.blog-contents-inner > p:last-child { margin-top: 25px; max-width: 225px; color: var(--muted); font-size: 14px; }
.blog-body { min-width: 0; }
.blog-intro { padding-bottom: 42px; }
.blog-body h2 { font-size: clamp(30px, 3.5vw, 42px); }
.blog-intro > p:not(.eyebrow) { margin-top: 22px; max-width: 650px; color: var(--muted); font-size: 19px; }
.publication-note { display: flex; align-items: flex-start; gap: 12px; padding: 19px 22px; margin-top: 28px; border: 1px solid var(--line); border-radius: 8px; corner-shape: squircle; background: var(--surface); color: var(--muted); font-size: 16px; }
.publication-note .signal-dot { margin-top: 8px; background: var(--amber); }
.blog-part { border-top: 1px solid var(--line); padding-block: 35px; scroll-margin-top: 30px; }
.blog-part h2 { margin-top: 13px; }
.part-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.blog-part > p { color: var(--muted); margin-top: 18px; }
.article-topics { list-style: none; padding: 0; margin: 25px 0 0; }
.article-topics li { padding-block: 18px; border-top: 1px solid var(--line); }
.article-topics h3 { font-size: 21px; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
blog-card { display: flex; min-width: 0; }
blog-card[hidden] { display: none; }
blog-card:not([cover]) { display: none; }
blog-card > .post-card { flex: 1; }
.post-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; corner-shape: squircle; background: linear-gradient(to bottom, transparent, #00000024), var(--surface); transition: border-color .2s, transform .2s; }
.post-card[hidden] { display: none; }
a.post-card:hover { border-color: var(--cyan); }
.post-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.post-cover { display: block; flex-shrink: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); }
.post-cover-placeholder { display: flex; align-items: center; padding: 24px; background: linear-gradient(to bottom, transparent 35%, #00000038), url('../content/brand-dots.svg'), var(--surface); color: var(--cyan); font: 500 clamp(24px, 3vw, 36px)/1.15 var(--display); }
.post-card h3 { margin: 16px 18px 6px; font: 600 clamp(18px, 1.5vw, 21px)/1.3 "Segoe UI", system-ui, sans-serif; overflow-wrap: anywhere; }
.post-card > p { display: none; }
.post-card .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.post-card > .post-subtitle { display: block; margin: 0 18px 26px; color: var(--muted); font: 15px/1.45 "Segoe UI", system-ui, sans-serif; overflow-wrap: anywhere; }
.post-card-bottom { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; margin: auto 18px 10px; font-size: 14px; }
.post-card-bottom time, .post-date { color: var(--muted); white-space: nowrap; }
.post-date[lang="en"] { color: var(--amber); }
.post-card-bottom > .text-link { min-height: 24px; margin-left: auto; gap: 5px; font-size: inherit; white-space: nowrap; }
.article-topics p { color: var(--muted); margin-top: 7px; font-size: 16px; }
.blog-intro .topic-list { list-style: none; padding: 0; }
.blog-intro .topic-list li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 5px; corner-shape: squircle; color: var(--muted); font-size: 12px; }
.blog-body h2, .cover-title { overflow-wrap: anywhere; }
.cover-bottom { flex-wrap: wrap; }
.blog-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 26px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .blog-hero { gap: 35px; } }
@media (max-width: 700px) { .blog-hero { grid-template-columns: 1fr; padding-block: 40px 50px; gap: 40px; } .blog-hero h1 { font-size: clamp(42px, 9vw, 60px); } .blog-lead { font-size: 19px; } .blog-cover { max-width: 340px; padding: 28px 26px 24px 34px; } .cover-title { margin-top: 35px; } .cover-bottom { margin-top: 30px; } .blog-layout { grid-template-columns: 1fr; padding-block: 35px 55px; gap: 35px; } .blog-contents { position: static; } .blog-contents-inner > p:last-child { max-width: none; } .blog-intro > p:not(.eyebrow) { font-size: 18px; } }
@media (max-width: 700px) { .blog-cover-stack { max-width: 340px; } .cover-title { margin-top: 24px; } }
@media (max-width: 380px) { .nav-links { flex-wrap: wrap; justify-content: center; column-gap: 18px; } }
@media (max-width: 1279px) { .blog-contents ol { display: flex; flex-wrap: wrap; gap: 0 28px; } .blog-contents li + li { border-top: 0; } .blog-contents-inner > p:last-child { max-width: 620px; } }
@media (min-width: 1280px) {
 .blog-layout { width: min(1200px, calc(100% - 432px)); }
 .blog-contents { position: absolute; top: 90px; left: -204px; width: 180px; height: calc(100% - 180px); }
 .blog-contents-inner { position: sticky; top: 30px; }
}
@media (min-width: 601px) and (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .post-card { transition: none; } }

/* Match the 800 x 450 reference cover; text is shared component markup. */
.post-cover-composition {
 --cover-accent: #24cccd;
 position: relative; container-type: inline-size; isolation: isolate; overflow: hidden;
 background-color: #19191f;
 background-image: radial-gradient(ellipse 37.5% 66.667% at 76.875% 50%, color-mix(in srgb, var(--cover-accent) 15%, transparent), transparent), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22450%22%20viewBox%3D%220%200%20800%20450%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22dots%22%20width%3D%2228%22%20height%3D%2228%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate%2845%29%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221.5%22%20fill%3D%22%23777987%22%20opacity%3D%22.25%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22800%22%20height%3D%22450%22%20fill%3D%22url%28%23dots%29%22%2F%3E%3C%2Fsvg%3E");
 background-size: 100% 100%;
 background-position: center;
}
.post-cover-composition[data-category="base"] { --cover-accent: #ffc65c; }
.post-cover-composition[data-category="menu"] { --cover-accent: #24cccd; }
.post-cover-composition[data-category="play"] { --cover-accent: #ff3987; }
.post-cover-composition::before { content: ""; position: absolute; left: 5%; top: 33.333%; width: 46.875%; height: 40.667%; border-radius: 1.5cqw; background: #19191ff0; }
.post-cover-art { position: absolute; z-index: -1; right: 3%; top: 19%; width: 46%; height: 62%; object-fit: contain; mask-image: radial-gradient(ellipse closest-side, #000 35%, transparent 100%); }
.post-cover-composition > span { position: absolute; display: block; font-family: "Segoe UI", Arial, sans-serif; line-height: 1; }
.post-cover-category { top: 13.1%; left: 12%; color: #c6c5cd; font-size: 2.375cqw; letter-spacing: .375cqw; text-transform: uppercase; }
.post-cover-category::before { content: ""; position: absolute; right: calc(100% + 1.75cqw); top: .65cqw; width: 5.25cqw; height: .625cqw; background: var(--cover-accent); }
.post-cover-title { top: 39%; left: 5%; max-width: 52%; color: #f4f3f7; font-size: 5.5cqw; font-weight: 700; letter-spacing: -.1875cqw; white-space: nowrap; }
.post-cover-caption { top: 54.3%; left: 5.25%; max-width: 54%; color: var(--cover-accent); font-size: 2.625cqw; white-space: nowrap; }
.post-cover-series { bottom: 9.7%; left: 5%; color: #a6a5b1; font-size: 2.125cqw; }
.post-cover-number { bottom: 9%; right: 6%; color: var(--cover-accent); font-size: 3.5cqw; }

.post-cover-frame { position: relative; flex-shrink: 0; }
.post-cover-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 35%, #00000038); }