.blog { padding:90px 0; background:#e9e6e0; }
.blog-shell { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:0; padding:44px; color:#f7f3ed; background:radial-gradient(ellipse at 90% 0,#44316380,transparent 45%),#141522; border:1px solid #ffffff15; border-radius:30px; box-shadow:0 32px 80px #23233520; overflow:hidden; }
.blog .journal-head { grid-column:1 / -1; max-width:none; margin:0 0 34px; padding-bottom:30px; border-bottom:1px solid #ffffff26; }
.journal-masthead { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:38px; font-size:.58rem; letter-spacing:.16em; color:#c6b9dc; }
.journal-masthead > span:first-child { color:#f5f0fd; font-size:.85rem; letter-spacing:.22em; font-weight:700; }
.blog .eyebrow { color:#d6ff66; }
.blog .journal-head h2 { color:#f5f0e8; font-size:clamp(2.3rem,4.1vw,3.9rem); max-width:760px; margin:12px 0 16px; }
.blog .journal-head h2 .serif-italic { color:#c5a7ff; }
.blog .journal-head p { color:#bdbbc9; max-width:650px; font-size:.88rem; }
.blog .blog-entry { border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; min-width:0; padding-right:32px; }
.blog .blog-entry > summary { grid-template-columns:.85fr 1.15fr; gap:26px; padding:0; align-items:stretch; }
.journal-cover { position:relative; overflow:hidden; border-radius:12px; background:#44345e; min-height:380px; }
.journal-cover img { position:absolute; width:100%; height:100%; object-fit:cover; inset:0; opacity:.95; transition:transform .65s; }
.journal-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 44%,#251e3dbb); pointer-events:none; }
.journal-cover > span { position:absolute; z-index:1; left:23px; right:15px; bottom:59px; color:#fff; font:1.65rem/.98 var(--serif); letter-spacing:-.03em; }
.journal-cover > small { position:absolute; z-index:1; left:23px; bottom:24px; font-size:.49rem; letter-spacing:.14em; color:#e4dcf2; }
.journal-feature { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:8px 0; min-width:0; }
.journal-edition { display:flex; justify-content:space-between; gap:10px; width:100%; font-size:.5rem; letter-spacing:.12em; color:#c1b3da; margin-bottom:26px; }
.blog .blog-kicker { gap:5px; margin-bottom:16px; }
.blog .blog-kicker span { padding:3px 7px; background:transparent; border:1px solid #c5a7ff40; color:#d6c5ef; font-size:.49rem; font-weight:500; }
.blog .blog-entry h3 { color:#fffaf3; font-size:clamp(1.55rem,2.1vw,2.1rem); line-height:1.12; margin-bottom:16px; }
.blog .blog-deck { color:#c1bdcd; font-size:.77rem; line-height:1.7; }
.blog .blog-read { min-width:0; display:flex; gap:27px; align-items:center; padding:0 0 8px; margin-top:24px; border-radius:0; border-bottom:1px solid #d6ff6670; color:#d6ff66; background:transparent; font-size:.73rem; }
.blog .blog-read b { font-size:1.3rem; font-weight:400; }
.blog .blog-entry > summary:hover .blog-read,.blog .blog-entry > summary:focus-visible .blog-read,.blog .blog-entry[open] .blog-read { color:#fff; background:transparent; }
.journal-close-label,.blog-entry[open] .journal-open-label { display:none; }
.blog-entry[open] .journal-close-label { display:inline; }
.blog-entry[open] .blog-read b { transform:rotate(90deg); }
.blog .upcoming { align-self:start; padding:0 0 0 25px; border:0; border-left:1px solid #ffffff26; border-radius:0; background:transparent; }
.journal-next { display:block; font-size:.48rem; letter-spacing:.15em; color:#c5a7ff; margin-bottom:12px; }
.blog .upcoming h3 { color:#f2ecfa; font-size:1.45rem; line-height:1.15; margin-bottom:12px; }
.journal-next-note { color:#bdb7cc; font-size:.7rem; line-height:1.6; margin:0 0 12px; }
.blog .upcoming-list { grid-template-columns:1fr; gap:0; }
.blog .upcoming-list li { position:relative; padding:16px 0 16px 29px; background:transparent; border-radius:0; border-bottom:1px solid #ffffff15; color:#e0dbea; font-size:.71rem; line-height:1.5; }
.blog .upcoming-list li::before { position:absolute; left:0; top:17px; color:#bca2e0; font-size:.58rem; font-weight:500; }
.blog .upcoming-list li:last-child { border:0; }
.blog .article-body { margin-top:28px; padding:12px 28px 30px; background:#f1eee8; color:#253046; border:0; border-radius:14px; }
.blog .article-content h4 { color:#221d36; }
.blog .article-callout { border-color:#7c3cff; background:#e7e0ed; }
.blog .article-template { color:#e8e0f5; background:#242036; font-size:.84rem; overflow-wrap:anywhere; }
.blog .article-action { color:#322244; }
.blog .article-meta { color:#655d70; font-size:.65rem; }
.blog .article-content a { text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.blog .blog-entry[open] { grid-column:1 / -1; padding-right:0; }
.blog .blog-entry[open] > summary { grid-template-columns:minmax(220px,.65fr) 1.35fr; }
.blog-entry[open] + .upcoming { grid-column:1 / -1; margin-top:30px; padding:24px 0 0; border-left:0; border-top:1px solid #ffffff26; }
.blog-entry[open] + .upcoming .upcoming-list { grid-template-columns:repeat(4,1fr); gap:20px; }
@media (hover:hover) { .blog-entry > summary:hover .journal-cover img { transform:scale(1.04); } }
@media (max-width:1100px) { .blog-shell { padding:30px; grid-template-columns:minmax(0,1fr) 215px; } .blog .blog-entry { padding-right:24px; } .blog .blog-entry > summary { grid-template-columns:1fr; gap:20px; } .journal-cover { min-height:230px; } .journal-cover img { object-position:center 32%; } .journal-cover > span { bottom:45px; } .journal-edition { margin-bottom:18px; } .journal-cover > small { bottom:20px; } }
@media (max-width:700px) { .blog { padding:55px 0; } .blog-shell { padding:24px; border-radius:22px; grid-template-columns:1fr; } .journal-masthead { flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:26px; } .journal-masthead > span:first-child { font-size:.73rem; } .journal-masthead > span:last-child { font-size:.47rem; } .blog .journal-head { padding-bottom:24px; margin-bottom:24px; } .blog .journal-head h2 { font-size:2.3rem; } .blog .blog-entry { padding-right:0; } .journal-cover { min-height:245px; } .journal-cover img { object-position:center 35%; } .blog .blog-entry h3 { font-size:1.8rem; } .blog .blog-read { width:auto; } .blog .upcoming { border-left:0; border-top:1px solid #ffffff26; margin-top:30px; padding:24px 0 0; } .blog .upcoming-list { grid-template-columns:1fr 1fr; gap:0 18px; } .blog .upcoming-list li { font-size:.69rem; } .blog .article-body { padding:10px 18px 24px; } .blog .article-content p,.blog .article-content li { font-size:.88rem; } }
@media (max-width:360px) { .blog-shell { padding:18px; } .blog .journal-head h2 { font-size:2rem; } .blog .upcoming-list { grid-template-columns:1fr; } .blog .blog-entry h3 { font-size:1.6rem; } .blog .article-body { padding-inline:14px; } .blog .article-template,.blog .article-callout { padding:16px; } }
@media (max-width:700px) { .blog .blog-entry[open] > summary { grid-template-columns:1fr; } .blog-entry[open] + .upcoming .upcoming-list { grid-template-columns:1fr; gap:0; } }
@media (prefers-reduced-motion:reduce) { .journal-cover img { transition:none; } }