/*
 * Hontoko Blog UI shared shell.
 *
 * This is the single source of truth for the chrome and article geometry used
 * by both the post-18 compatibility renderer and every Generic Mode post.
 * It is loaded only on single blog posts handled by this plugin.
 */
:is(body.hontoko-bolt-article,body.hontoko-blog-generic){
  --yellow:#f5c400;
  --black:#171714;
  --muted:#77776f;
  --line:#deded7;
  margin:0;
  min-width:320px;
  background:#f8f8f5;
  color:var(--black);
  font-family:"Noto Sans JP",sans-serif;
  line-height:1.5;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-shell{overflow:visible}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .bolt-shell{width:100%;max-width:1120px;margin-inline:auto;padding-inline:16px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-shell>main{padding-top:64px}

/* Shared fixed header and navigation. */
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:64px;background:#fffffff2;backdrop-filter:blur(6px);border-bottom:1px solid #d9d9d5;font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI",Meiryo,"Segoe UI",sans-serif}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic).admin-bar .site-header{top:32px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .brand-logo{display:flex;align-items:center;text-decoration:none;color:#111}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .brand-logo-svg{display:block;width:auto;height:45px;max-width:none}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .primary-nav{display:none;align-items:center;gap:28px;margin:0}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .primary-nav a{color:#626262;font-size:14px;font-weight:500;text-decoration:none;transition:color .15s ease}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .primary-nav a:hover{color:#111}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .header-cta{display:none;align-items:center;justify-content:center;height:40px;padding:0 20px;border-radius:6px;background:#fdd000;color:#111;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .15s ease}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .header-cta:hover{background:#c9a500}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;color:#111;cursor:pointer}

/* Shared article column and introductory copy. */
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .breadcrumb{max-width:1180px;margin:0 auto;padding:29px 32px 25px;display:flex;gap:12px;align-items:center;color:#999;font-size:11px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .breadcrumb strong{font-weight:500;color:#6f6f69}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .page-grid{max-width:1180px;margin:0 auto;padding:0 32px 120px;display:grid;grid-template-columns:minmax(0,760px) 280px;gap:80px}
body.hontoko-blog-generic .hontoko-blog-main{padding-bottom:0}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-meta{display:flex;align-items:center;gap:10px;color:#999;font:11px/1.5 "DM Sans",sans-serif;letter-spacing:.03em}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-meta .category{padding:5px 9px;background:var(--yellow);color:var(--black);font-size:10px;font-weight:800;letter-spacing:.1em}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-meta .meta-dot{width:3px;height:3px;border-radius:50%;background:#aaa}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-meta span:last-child{display:flex;align-items:center;gap:5px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-meta svg{flex:0 0 auto}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article h1{margin:27px 0 25px;font-size:clamp(31px,4vw,48px);font-weight:800;line-height:1.42;letter-spacing:.02em;text-align:justify;text-align-last:left;text-justify:inter-ideograph}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article h1 em{display:inline;font-style:normal;background:linear-gradient(transparent 63%,var(--yellow) 63%)}
/* Keep introductory copy aligned to the same right edge as the article body. */
body.hontoko-bolt-article .lead,
body.hontoko-blog-generic .hontoko-blog-excerpt{width:100%;max-width:none;color:#5f5f58;font-size:15px;line-height:2.05;text-align:justify;text-align-last:left;text-justify:inter-ideograph}
body.hontoko-blog-generic .hontoko-blog-excerpt p{text-align:inherit;text-align-last:inherit}
/* Align only normal prose; controls and structured components keep their own layout. */
body.hontoko-bolt-article .article-section>p,
body.hontoko-blog-generic .hontoko-blog-content>p{text-align:justify;text-align-last:left;text-justify:inter-ideograph}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .ref-list{display:flex;flex-direction:column;gap:0;margin:0;padding:0;border-top:1px solid var(--line)}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .ref-item{display:flex;align-items:center;justify-content:space-between;margin:0;padding:16px 8px;border-bottom:1px solid #eee;color:#53534d;font-size:12px;font-weight:400;line-height:1.5;text-decoration:none;transition:padding .2s}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .ref-item::after{content:"↗";color:#bbb;font-size:14px;line-height:1}
body.hontoko-bolt-article .ref-item::after{content:none}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .ref-item:hover{padding-left:15px;color:var(--black)}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-footer{display:flex;align-items:center;justify-content:space-between;margin-top:63px;padding-top:20px;border-top:1px solid var(--line)}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .tag-list{display:flex;flex-wrap:wrap;gap:8px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .tag-list :is(span,a){padding:7px 10px;background:#edede8;color:#777;font-size:11px;font-weight:400;line-height:1.5;text-decoration:none}

/* Shared sidebar modules. */
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .sidebar{padding-top:72px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card{position:static;top:auto;padding:22px 20px;background:#fff;border-top:3px solid var(--black)}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-heading{display:flex;align-items:center;gap:10px;font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.16em}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-line{flex:1;height:1px;background:var(--yellow)}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card h3{margin:13px 0 17px;font-size:16px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card ol{margin:0;padding:0;list-style:none;counter-reset:toc}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card li{position:relative;padding:12px 0 12px 29px;border-top:1px solid #eee;counter-increment:toc;color:#777;font-size:11px;line-height:1.5}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card li::before{position:absolute;top:12px;left:0;content:"0" counter(toc);color:#b69400;font:600 11px/1 "DM Sans",sans-serif}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card li.is-subheading{padding-left:38px;font-size:10px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card li.is-subheading::before{left:12px;content:"–"}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .toc-card a{color:inherit;text-decoration:none}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .profile-card{margin-top:35px;padding:27px 22px;background:var(--yellow)}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .newsletter{margin-top:35px;padding:27px 22px;background:var(--black);color:#fff}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .profile-avatar{display:grid;width:40px;height:40px;margin-bottom:20px;border-radius:50%;place-items:center;background:var(--black);color:var(--yellow);font:700 16px/1 "DM Sans",sans-serif}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) :is(.profile-label,.newsletter-kicker){font-size:10px;font-weight:800;letter-spacing:.12em}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) :is(.profile-card,.newsletter) h3{margin:11px 0;font-size:18px;line-height:1.6}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) :is(.profile-card,.newsletter) p{margin:0;font-size:12px;line-height:1.9}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .newsletter p{color:#b8b8ae}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .sidebar-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding:14px 15px;font-size:14px;font-weight:800;line-height:1.3;text-decoration:none}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .sidebar-cta--yellow{background:var(--black);color:#fff}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .sidebar-cta--dark{background:var(--yellow);color:var(--black)}

/* Shared footer. */
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer{padding:0;border-top:1px solid #d9d9d5;background:#f7f7f4;font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI",Meiryo,"Segoe UI",sans-serif}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-inner{display:block;padding-block:32px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-top{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:0}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .brand-logo--footer{display:flex;align-items:center;text-decoration:none}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .brand-logo-svg{display:block;width:auto;height:36px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-tagline{max-width:26em;margin:12px 0 0;color:#626262;font-size:11px;line-height:1.8}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-nav{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:8px;color:#626262;font-size:12px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-nav a{color:inherit;text-decoration:none}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-bottom{display:flex;align-items:center;flex-wrap:wrap;column-gap:16px;row-gap:6px;margin-top:32px;padding-top:16px;border-top:1px solid #d9d9d5;color:#626262;font-size:11px;letter-spacing:normal}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-note-inline{display:inline-flex;align-items:center;gap:4px}
:is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-note-inline svg{width:14px;height:14px}

@media(min-width:640px){
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .bolt-shell{padding-inline:24px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-top{flex-direction:row}
}
@media(min-width:1024px){
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .primary-nav{display:flex}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .header-cta{display:inline-flex}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .menu-toggle{display:none}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-top>div:first-child{flex:0 0 240px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-nav{flex:1;flex-wrap:nowrap;justify-content:space-between;column-gap:12px;row-gap:0;font-size:11px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-footer .footer-nav a{white-space:nowrap}
}
@media(max-width:1023px){
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .primary-nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 16px;background:#fff;border-top:1px solid #d9d9d5}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .primary-nav.is-open{display:flex}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .site-header .primary-nav a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid #d9d9d5b3;color:#111;font-size:15px}
}
@media(max-width:850px){
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .breadcrumb{padding:23px 20px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .page-grid{display:block;padding:0 20px 80px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .page-grid .sidebar{display:none}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-footer{align-items:flex-start;flex-direction:column;gap:20px}
}
@media(max-width:782px){
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic).admin-bar .site-header{top:46px}
}
@media(max-width:480px){
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article h1{font-size:29px}
  body.hontoko-bolt-article .lead,
  body.hontoko-blog-generic .hontoko-blog-excerpt{font-size:13px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-meta{gap:7px;font-size:10px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .article-meta .category{font-size:9px}
  :is(body.hontoko-bolt-article,body.hontoko-blog-generic) .ref-item{padding:14px 6px;font-size:11px}
}