
.han-spb4,
.han-spb4 *{
  box-sizing:border-box;
}
.han-spb4{
  --han-spb4-accent:#ff7a00;
  --han-spb4-text:#141414;
  --han-spb4-muted:#737373;
  --han-spb4-card-bg:#ffffff;
  --han-spb4-radius:22px;
  --han-spb4-gap:28px;
  width:100%;
  max-width:980px;
  margin:0 auto;
  color:var(--han-spb4-text);
  font-family:inherit;
  line-height:1.7;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.han-spb4 a{
  color:inherit;
  text-decoration:none !important;
}
.han-spb4 img{
  max-width:100%;
  height:auto;
}
.han-spb4__header{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-bottom:var(--han-spb4-gap);
}
.han-spb4__hero-wrap{
  overflow:hidden;
  border-radius:var(--han-spb4-radius);
}
.han-spb4__hero{
  display:block;
  width:100%;
  border-radius:var(--han-spb4-radius);
}
.han-spb4__meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  font-size:13px;
  color:var(--han-spb4-muted);
}
.han-spb4__meta-left,
.han-spb4__meta-right{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
}
.han-spb4__cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:999px;
  min-height:34px;
  padding:0 12px;
  transition:.22s ease;
  background:#fff;
}
.han-spb4__cat:hover{
  border-color:var(--han-spb4-accent);
  color:var(--han-spb4-accent);
}
.han-spb4__title{
  margin:0;
  font-size:clamp(34px,5vw,58px);
  line-height:1.04;
  letter-spacing:-0.045em;
  font-weight:700;
  text-wrap:balance;
}
.han-spb4__excerpt{
  font-size:19px;
  line-height:1.7;
  color:var(--han-spb4-muted);
  max-width:820px;
}
.han-spb4__content{
  color:var(--han-spb4-text);
  font-size:17px;
}
.han-spb4__content > *:first-child{
  margin-top:0 !important;
}
.han-spb4__content > *:last-child{
  margin-bottom:0 !important;
}
.han-spb4__content h1,
.han-spb4__content h2,
.han-spb4__content h3,
.han-spb4__content h4,
.han-spb4__content h5,
.han-spb4__content h6{
  margin:1.4em 0 .55em;
  line-height:1.15;
  letter-spacing:-0.03em;
  font-weight:700;
  color:var(--han-spb4-text);
}
.han-spb4__content h2{ font-size:clamp(28px,4vw,38px); }
.han-spb4__content h3{ font-size:clamp(24px,3vw,30px); }
.han-spb4__content p,
.han-spb4__content ul,
.han-spb4__content ol,
.han-spb4__content blockquote{
  margin:0 0 1.2em;
}
.han-spb4__content ul,
.han-spb4__content ol{
  padding-left:1.2em;
}
.han-spb4__content blockquote{
  margin:1.6em 0;
  padding:18px 20px;
  border-left:4px solid var(--han-spb4-accent);
  background:rgba(255,122,0,.06);
  border-radius:14px;
}
.han-spb4__content a{
  color:var(--han-spb4-accent);
}
.han-spb4__content figure,
.han-spb4__content .wp-block-image,
.han-spb4__content img{
  border-radius:calc(var(--han-spb4-radius) - 4px);
}
.han-spb4__author,
.han-spb4__share,
.han-spb4__comments-wrap{
  margin-top:var(--han-spb4-gap);
  background:var(--han-spb4-card-bg);
  border:1px solid rgba(20,20,20,.08);
  border-radius:var(--han-spb4-radius);
}
.han-spb4__author{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:18px;
}
.han-spb4__author-avatar-img{
  width:88px;
  height:88px;
  border-radius:50%;
  display:block;
}
.han-spb4__author-name{
  font-size:20px;
  line-height:1.15;
  font-weight:700;
  margin:0 0 8px;
}
.han-spb4__author-desc{
  font-size:15px;
  color:var(--han-spb4-muted);
  line-height:1.7;
}
.han-spb4__share{
  padding:18px;
}
.han-spb4__share-title,
.han-spb4__comments-title{
  font-size:22px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 14px;
  letter-spacing:-0.03em;
}
.han-spb4__share-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.han-spb4__share-link{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(20,20,20,.1);
  border-radius:999px;
  padding:10px 16px;
  background:#fff;
  transition:.22s ease;
}
.han-spb4__share-link:hover{
  color:#fff;
  border-color:var(--han-spb4-accent);
}
.han-spb4__share-icon{
  width:18px;
  height:18px;
  display:inline-flex;
}
.han-spb4__share-icon svg{
  width:100%;
  height:100%;
  display:block;
}
.han-spb4__nav{
  margin-top:var(--han-spb4-gap);
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.han-spb4__nav-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:132px;
  padding:22px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:var(--han-spb4-radius);
  background:var(--han-spb4-card-bg);
  transition:.24s ease;
}
.han-spb4__nav-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,122,0,.22);
  box-shadow:0 16px 30px rgba(20,20,20,.06);
}
.han-spb4__nav-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--han-spb4-muted);
}
.han-spb4__nav-title{
  font-size:20px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:-0.03em;
  max-width:92%;
}
.han-spb4__nav-arrow{
  position:absolute;
  right:18px;
  bottom:18px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff4ea;
  color:var(--han-spb4-accent);
  transition:.22s ease;
}
.han-spb4__nav-arrow svg{
  width:18px;
  height:18px;
  display:block;
}
.han-spb4__comments-wrap{
  padding:22px;
}
.han-spb4 .comments-area{
  all:initial;
  display:block;
  font-family:inherit;
  color:var(--han-spb4-text);
}
.han-spb4 .comments-area *,
.han-spb4 .comment-respond *,
.han-spb4 .comment-form *{
  box-sizing:border-box;
  font-family:inherit;
}
.han-spb4 .comments-area a{
  color:inherit;
  text-decoration:none !important;
}
.han-spb4 .comments-title,
.han-spb4 .comment-reply-title{
  display:block;
  margin:0 0 16px;
  color:var(--han-spb4-text);
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-0.03em;
}
.han-spb4 .comment-list{
  list-style:none;
  margin:0 0 24px;
  padding:0;
}
.han-spb4 .comment-list .children{
  list-style:none;
  margin:14px 0 0 18px;
  padding:0 0 0 18px;
  border-left:1px solid rgba(20,20,20,.08);
}
.han-spb4 .comment-body{
  border:1px solid rgba(20,20,20,.08);
  border-radius:18px;
  padding:18px;
  background:#fff;
}
.han-spb4 .comment-list > li + li{
  margin-top:14px;
}
.han-spb4 .comment-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
  margin-bottom:10px;
  font-size:13px;
  color:var(--han-spb4-muted);
}
.han-spb4 .comment-author .fn{
  font-style:normal;
  font-weight:700;
  color:var(--han-spb4-text);
}
.han-spb4 .comment-content p:last-child{
  margin-bottom:0;
}
.han-spb4 .reply a,
.han-spb4 .comment-edit-link{
  color:var(--han-spb4-accent);
  font-size:13px;
  font-weight:600;
}
.han-spb4 .comment-respond{
  margin-top:18px;
}
.han-spb4 .comment-notes,
.han-spb4 .logged-in-as{
  font-size:14px;
  color:var(--han-spb4-muted);
  margin:0 0 16px;
}
.han-spb4 .comment-form{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin:0;
}
.han-spb4 .comment-form-comment,
.han-spb4 .comment-form-cookies-consent,
.han-spb4 .form-submit,
.han-spb4__field--full{
  grid-column:1 / -1;
}
.han-spb4 .comment-form label{
  display:block;
  margin:0 0 8px;
  color:var(--han-spb4-text);
  font-size:13px;
  font-weight:600;
}
.han-spb4 .comment-form input:not([type=checkbox]):not([type=submit]),
.han-spb4 .comment-form textarea{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  max-width:100% !important;
  border:1px solid #e8e8e8 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:none !important;
  outline:none !important;
  color:var(--han-spb4-text) !important;
  padding:14px 16px !important;
  font-size:15px !important;
  line-height:1.5 !important;
  margin:0 !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.han-spb4 .comment-form input:focus,
.han-spb4 .comment-form textarea:focus{
  border-color:var(--han-spb4-accent) !important;
  box-shadow:0 0 0 4px rgba(255,122,0,.12) !important;
}
.han-spb4 .comment-form textarea{
  min-height:170px !important;
  resize:vertical;
}
.han-spb4 .comment-form-cookies-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--han-spb4-muted);
}
.han-spb4 .comment-form-cookies-consent input{
  margin-top:3px;
}
.han-spb4 .comment-form .submit{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  border:1px solid var(--han-spb4-accent) !important;
  border-radius:999px !important;
  background:var(--han-spb4-accent) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  padding:0 24px !important;
  line-height:1 !important;
  box-shadow:none !important;
  text-transform:none !important;
  transition:transform .2s ease, opacity .2s ease, background .2s ease !important;
}
.han-spb4 .comment-form .submit:hover{
  transform:translateY(-2px);
  opacity:.96;
}
.han-spb4__empty{
  padding:20px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:16px;
}
@media (max-width: 767px){
  .han-spb4{
    --han-spb4-gap:22px;
  }
  .han-spb4__title{
    font-size:clamp(28px, 9vw, 42px);
  }
  .han-spb4__excerpt{
    font-size:16px;
  }
  .han-spb4__author{
    grid-template-columns:1fr;
  }
  .han-spb4__nav{
    grid-template-columns:1fr;
  }
  .han-spb4 .comment-form{
    grid-template-columns:1fr;
  }
  .han-spb4 .comment-list .children{
    margin-left:10px;
    padding-left:12px;
  }
}
