/* Original editorial identity: an assembled heart, not loose classification tiles. */
.kokoro-heart-hero{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(280px,.86fr);
  gap:clamp(6px,2.6vw,42px);
  min-height:450px;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(26px,3.8vw,55px) clamp(22px,4.5vw,60px);
  background:
    radial-gradient(ellipse 45% 72% at 79% 51%,rgba(234,231,213,.68),transparent 87%),
    radial-gradient(ellipse 43% 75% at 35% 113%,rgba(227,237,224,.67),transparent 85%),
    linear-gradient(130deg,#fffefa 1%,#f4f5ed 67%,#faf8f2 100%);
  border:1px solid #e4e6d9;
}
.kokoro-heart-copy{position:relative;z-index:3;min-width:0}
.kokoro-heart-copy .microtitle{font-size:11px;letter-spacing:.2em;color:#a08f6c}
.kokoro-heart-hero .kokoro-heart-copy h1,
.guide-theme .kokoro-heart-hero .kokoro-heart-copy h1{
  font:500 clamp(29px,3.5vw,47px)/1.66 var(--font-heading,"Shippori Mincho",serif);
  letter-spacing:.012em;
  color:#334f3e;
  margin:17px 0 22px;
  max-width:none;
}
.kokoro-heart-hero .kokoro-heart-copy .intro-copy,
.guide-theme .kokoro-heart-hero .kokoro-heart-copy .intro-copy{
  max-width:570px;
  position:relative;
  z-index:2;
  font-size:13px;
  line-height:2.25;
  color:#617566;
}
.kokoro-heart-visual{
  position:relative;
  width:100%;
  max-width:470px;
  justify-self:center;
  align-self:center;
  margin:-16px -15px -18px 0;
  z-index:1;
}
.kokoro-heart-visual::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:17% 14%;
  border-radius:50%;
  background:radial-gradient(circle,#fff6df70,#f1e5c920 55%,transparent 75%);
  filter:blur(16px);
}
.kokoro-heart-visual img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  filter:drop-shadow(0 14px 22px rgba(71,97,76,.09));
}
.kokoro-heart-actions{
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
  margin-top:25px;
}
.kokoro-heart-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:39px;
  padding:9px 19px;
  border-radius:26px;
  background:#3d614a;
  border:1px solid #3d614a;
  color:#fff;
  font-size:11px;
  line-height:1.45;
  font-weight:600;
  text-decoration:none;
  transition:background .2s,border-color .2s;
}
.kokoro-heart-actions a:hover{background:#284d36}
.kokoro-heart-actions a.secondary{
  background:#fffefab3;
  border-color:#c9d7c7;
  color:#4b6d54;
}
.kokoro-heart-actions a.secondary:hover{background:#eef4ed}
.kokoro-heart-footnote{
  position:absolute;
  bottom:22px;
  right:clamp(26px,4vw,54px);
  font-size:10px;
  color:#96a190;
  letter-spacing:.07em;
  z-index:2;
}
#featured-guides,#topics-list{scroll-margin-top:24px}
@media(max-width:850px){
  .kokoro-heart-hero{
    grid-template-columns:minmax(0,1fr) minmax(210px,.65fr);
    gap:3px;
    min-height:385px;
    padding:32px 27px;
  }
  .kokoro-heart-hero .kokoro-heart-copy h1,.guide-theme .kokoro-heart-hero .kokoro-heart-copy h1{font-size:clamp(27px,4.5vw,38px)}
  .kokoro-heart-visual{margin:0 -15px 0 0}
}
@media(max-width:620px){
  .kokoro-heart-hero{
    grid-template-columns:minmax(0,1fr);
    gap:1px;
    min-height:0;
    padding:38px 22px 26px;
    border-radius:17px;
  }
  .kokoro-heart-copy{text-align:left}
  .kokoro-heart-copy .microtitle{font-size:10px;letter-spacing:.15em}
  .kokoro-heart-hero .kokoro-heart-copy h1,.guide-theme .kokoro-heart-hero .kokoro-heart-copy h1{
    font-size:clamp(26px,7vw,34px);
    line-height:1.7;
    margin:12px 0 13px;
  }
  .kokoro-heart-hero .kokoro-heart-copy .intro-copy,.guide-theme .kokoro-heart-hero .kokoro-heart-copy .intro-copy{
    font-size:12px;
    line-height:2.1;
  }
  .kokoro-heart-visual{
    order:0;
    width:min(100%,310px);
    max-width:310px;
    margin:0 auto -6px;
    justify-self:center;
  }
  .kokoro-heart-actions{margin-top:19px;gap:9px}
  .kokoro-heart-actions a{font-size:11px;min-height:38px;padding:9px 14px}
  .kokoro-heart-footnote{right:20px;bottom:15px;font-size:9px}
}
@media(max-width:380px){
  .kokoro-heart-hero{padding-inline:16px}
  .kokoro-heart-hero .kokoro-heart-copy h1,.guide-theme .kokoro-heart-hero .kokoro-heart-copy h1{font-size:25px}
  .kokoro-heart-visual{max-width:265px}
}
@media(prefers-reduced-motion:reduce){.kokoro-heart-actions a{transition:none}}