.blog-page .content-shell { min-height:calc(100vh - 80px); }
.blog-page .blog-section { padding-top:120px;padding-bottom:100px; }
.blog-page h1 { font:700 clamp(42px,4.5vw,68px)/1.13 var(--display);letter-spacing:-.5px;margin:12px 0 0; }
.blog-page h1 em { font-style:normal;color:var(--accent); }
.blog-toolbar { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line); }
.blog-toolbar>p { display:flex;align-items:center;gap:9px;margin:0;color:var(--accent);font:9px/1.6 var(--mono);letter-spacing:1px; }
.blog-sound,.blog-retry { border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:var(--surface);color:var(--ink);font:10px/1.5 var(--mono);cursor:pointer; }
.blog-sound:hover,.blog-retry:hover { background:var(--surface-hover); }
.blog-sound:focus-visible,.blog-retry:focus-visible,.blog-card:focus-visible { outline:2px solid var(--accent);outline-offset:5px; }
.blog-feed-note { margin:0 0 24px;font:10px/1.7 var(--mono);color:var(--muted); }
.blog-grid { gap:24px; }
.writing-card.blog-card { padding:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface); }
.blog-card::after { display:none; }
.blog-card-art { position:relative;aspect-ratio:1.85;overflow:hidden;background:linear-gradient(135deg,var(--surface-tint),var(--paper));border-bottom:1px solid var(--line); }
.blog-card-art img { display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s ease; }
.blog-card:hover .blog-card-art img { transform:scale(1.035); }
.blog-card-art::before { content:'研究ノート';position:absolute;inset:0;display:grid;place-items:center;font:24px/1.5 'Noto Sans JP',sans-serif;letter-spacing:7px;color:var(--muted); }
.blog-card-art img { position:relative; }
.blog-card-copy { display:flex;flex-direction:column;flex:1;padding:22px; }
.blog-card-meta { display:flex;justify-content:space-between;gap:12px;color:var(--accent);font:8px/1.6 var(--mono);letter-spacing:.7px; }
.blog-card-copy h3 { margin:12px 0 9px;font-size:21px;line-height:1.35; }
.blog-card-copy p { margin:0 0 20px;font-size:13px;line-height:1.8;color:var(--secondary-ink); }
.blog-card-copy .text-link { margin-top:auto;padding-top:12px; }
.blog-credit { margin:25px 0 0;color:var(--muted);font:9px/1.7 var(--mono); }
.blog-credit a { text-decoration:underline;text-underline-offset:3px; }
.blog-guide { --host-height:min(53vh,460px);position:fixed;z-index:25;right:0;bottom:0;width:calc(var(--host-height) * .84);height:var(--host-height);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(calc(100% + 24px));transition:transform 1.15s cubic-bezier(.22,1,.36,1),opacity .55s,visibility 0s 1.15s; }
.blog-guide[data-state="present"] { transform:translateY(0);opacity:1;visibility:visible;transition-delay:0s; }
.blog-guide[data-state="leaving"] { transform:translateY(calc(100% + 70px));opacity:0;visibility:visible;transition:transform 1.65s cubic-bezier(.55,0,.8,.45),opacity .55s 1.1s; }
.blog-guide-bubble { position:absolute;z-index:1;right:calc(100% - 105px);top:14%;width:210px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:13px 15px;border-radius:13px 13px 3px 13px;box-shadow:0 6px 24px #17271e18; }
.blog-guide-bubble::after { content:'';position:absolute;right:-7px;bottom:18px;width:12px;height:12px;transform:rotate(-45deg);background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line); }
.blog-guide-jp { color:var(--accent);font:600 15px/1.5 'Noto Sans JP',sans-serif; }
.blog-guide-roman { font:600 11px/1.5 var(--mono); }
.blog-guide-caption { color:var(--muted);font:10px/1.5 'DM Sans',sans-serif; }
.blog-guide-portrait { position:absolute;inset:0;overflow:hidden;transform:scaleX(-1); }
.blog-guide-character { position:relative;display:block;width:100%;aspect-ratio:2/3;margin:0;filter:drop-shadow(-5px 0 12px #17271e20);transform-origin:55% 80%; }
.host-portrait-image { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity var(--theme-fade-duration,3.2s) ease; }
.host-portrait-image.is-current { opacity:1; }
.blog-guide[data-state="present"] .blog-guide-character { animation:host-breathe 6s ease-in-out 1.15s infinite; }
.blog-guide[data-state="leaving"] .blog-guide-character { transform:translateY(12px) rotate(2deg);transition:transform .7s ease; }
@keyframes host-breathe { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(3px) rotate(-.4deg); } }
@supports(height:1svh) { .blog-guide { --host-height:min(53svh,460px); } }
@media(max-width:760px) {
  .blog-guide { --host-height:min(34vh,285px);width:calc(var(--host-height) * .84); }
  .blog-guide-bubble { right:min(calc(100% - 52px),calc(100vw - 170px));top:10%;width:158px;padding:9px 11px; }
  .blog-guide-jp { font-size:13px; }
  .blog-guide-caption { font-size:9px; }
  .blog-toolbar>p { font-size:8px;letter-spacing:.3px; }
  .blog-page .blog-section { padding-top:40px;padding-bottom:220px; }
}
@media(max-width:760px) { @supports(height:1svh) { .blog-guide { --host-height:min(34svh,285px); } } }
html[data-motion-paused="true"] .blog-guide,html[data-motion-paused="true"] .blog-guide *,html[data-motion-paused="true"] .blog-card-art img { transition:none!important;animation:none!important; }
@media(prefers-reduced-motion:reduce) { .blog-guide,.blog-guide *,.blog-card-art img { transition:none!important;animation:none!important; } }