/* Kanji Boss Main Styles (mobile-first) */
:root{
  --kb-bg: #0b141a;
  --kb-panel: rgba(14, 20, 24, 0.70);
  --kb-panel-strong: rgba(14, 20, 24, 0.85);
  --kb-accent: #b32023; /* deep red */
  --kb-text: #e7ecef;
  --kb-muted: #b8c1c5;
  --kb-round: 18px;
  --kb-shadow: 0 20px 50px rgba(0,0,0,.45);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--kb-bg) var(--kb-bg-image) center/cover fixed no-repeat;
  color: var(--kb-text);
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.6;
}
.has-admin-bar .kb-site-header{ top: 46px; }
@media (min-width:783px){ .has-admin-bar .kb-site-header{ top: 32px; }}

/* Header */
.kb-site-header{
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(20,20,24,.85) var(--kb-menu-image) repeat-x top left;
  backdrop-filter: blur(4px);
  border-bottom: 2px solid #5d0f10;
}
.kb-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 10px 16px;
}
.kb-brand img{ height: 44px; width:auto; display:block; }
.kb-site-title{ font-family: Cinzel, serif; font-size: 22px; color: #fff; text-decoration:none; }

.kb-nav-toggle{
  width: 42px; height: 36px; background: transparent; border:none; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.kb-nav-toggle span{ display:block; height:2px; background:#fff; transition: all .25s ease; }
.kb-nav-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.kb-nav-toggle.open span:nth-child(2){ opacity:0; }
.kb-nav-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.kb-primary-nav{ display:none; }
.kb-primary-nav.open{ display:block; }
.kb-menu{ list-style:none; margin:0; padding:0; }
.kb-menu li{ border-top: 1px solid rgba(255,255,255,.06); }
.kb-menu a{
  display:block; padding:12px 16px; text-decoration:none; color:#fff;
  font-weight:600; letter-spacing:.02em;
}
.kb-menu a:hover{ background: rgba(255,255,255,.06); color: #fff; }
@media (min-width: 900px){
  .kb-nav-toggle{ display:none; }
  .kb-primary-nav{ display:block; }
  .kb-menu{ display:flex; gap: 10px; }
  .kb-menu li{ border:0; }
  .kb-menu a{ padding:8px 12px; border-radius: 999px; }
  .kb-menu a:hover{ background: rgba(255,255,255,.08); }
}

/* Hero */
.kb-hero{
  min-height: 72vh;
  display:grid; place-items:center;
  position:relative;
}
.kb-hero::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.52));
}
.kb-hero-overlay{ position:relative; width:100%; padding: 18vh 16px 10vh; }
.kb-hero-box{
  max-width: 960px; margin-inline:auto;
  padding: 28px 28px 32px;
  border-radius: var(--kb-round);
  background: var(--kb-panel);
  box-shadow: var(--kb-shadow);
  text-align: left;
}
.kb-hero-box h1{
  margin:0 0 18px;
  font-family: Cinzel, serif;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: .02em;
}
.kb-btn{
  display:inline-block; text-decoration:none;
  margin-top: 8px;
  padding: 12px 20px;
  background: var(--kb-accent);
  color: #fff; font-weight: 700; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(179,32,35,.35);
}
.kb-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }

/* Strips / panels */
.kb-strip{ padding: 40px 16px; }
.kb-panels{
  display:grid; gap: 16px;
  grid-template-columns: 1fr;
}
.panel.glass{
  background: var(--kb-panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--kb-round);
  padding: 20px;
  box-shadow: var(--kb-shadow);
}
.panel h2, .panel h3{ font-family: Cinzel, serif; margin-top:0; }
.jp{ font-family: "Noto Sans JP", sans-serif; font-weight:700; letter-spacing:.15em; }

.panel.tall{ min-height: 240px; display:flex; flex-direction:column; justify-content:center; }

.kb-explore{ padding: 20px 16px 40px; }
.kb-two-col{ padding: 20px 16px 80px; display:grid; gap:16px; grid-template-columns: 1fr; }

.kb-checklist{ padding-left: 0; margin: 0; list-style: none; }
.kb-checklist li{ display:flex; gap:10px; margin: 8px 0; }
.kb-checklist li::before{
  content:'✓'; font-weight: 700; color: var(--kb-accent);
}

/* Content wrap for posts/pages */
.kb-content-wrap{ padding: 32px 16px 64px; }
.kb-article-title{ font-family: Cinzel, serif; }
.kb-article-body a{ color: var(--kb-accent); }

/* Footer */
.kb-site-footer{
  background: rgba(12,12,16,.9);
  border-top: 2px solid #5d0f10;
  padding: 24px 16px;
}
.kb-footer-inner{ display:grid; gap: 14px; grid-template-columns: 1fr; text-align:center; }
.kb-footer-menu{ justify-content:center; display:flex; gap:12px; }

/* Desktop layout approximating the mockup */
@media (min-width: 700px){
  .kb-panels{ grid-template-columns: repeat(2, 1fr); }
  .kb-panels .panel:nth-child(1){ grid-column: 1 / -1; }
}
@media (min-width: 1024px){
  .kb-hero-box{ max-width: 1100px; padding: 40px 42px; }
  .kb-panels{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
  .kb-panels .panel:nth-child(1){ grid-column: 1 / -1; }
  .kb-two-col{ grid-template-columns: 1fr 1fr; gap: 22px; }
  .kb-footer-inner{ grid-template-columns: 1fr auto 1fr; text-align:left; align-items:center; }
}