body.single-post .hm-post-article { max-width: 1160px; padding-bottom: 72px; }
/* v1.5.29: keep migrated post content full-width and prevent legacy image floats from squeezing text on phones. */
body.single-post #content { width: 100%; max-width: none; float: none; }
body.single-post .hm-post-article,
body.single-post .hm-post-content { box-sizing: border-box; width: 100%; }
body.single-post .hm-post-content > p,
body.single-post .hm-post-content > h1,
body.single-post .hm-post-content > h2,
body.single-post .hm-post-content > h3,
body.single-post .hm-post-content > blockquote,
body.single-post .hm-post-content > ul,
body.single-post .hm-post-content > ol { clear: both; max-width: 100%; }
body.single-post .hm-post-content > .wp-block-image { display: block; float: none; clear: both; width: 100%; max-width: 100%; }
body.single-post .hm-post-content .wp-block-image img,
body.single-post .hm-post-content img.alignleft,
body.single-post .hm-post-content img.alignright { display: block; float: none; box-sizing: border-box; width: min(100%, 760px); max-width: 100%; height: auto; margin: 0 auto; }
body.single-post .hm-post-article .page-title { display: block; text-align: left; border: 0; margin: 0 auto 12px; padding: 46px 0 0; }
body.single-post .hm-post-article .page-title h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; line-height: 1.35; }
.hm-post-content { max-width: 980px; margin: 0 auto; font-size: 1.08rem; line-height: 1.9; }
.hm-topic-hero { min-height: 210px; margin: 0 calc(50% - 50vw) 34px; padding: 36px 20px; display: grid; place-items: center; text-align: center; color: #fff; background-position: center 52%; background-size: cover; position: relative; isolation: isolate; }
.hm-topic-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.38); }
.hm-topic-hero h2 { margin: 0; font-family: "Times New Roman", serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hm-topic-subtitle { margin: 0 0 1rem !important; font-size: clamp(1.35rem, 3.4vw, 2rem) !important; }
.hm-post-content h2:not(.hm-topic-hero h2) { font-weight: 700; }
.hm-post-content .wp-block-image { margin: 28px auto 34px; text-align: center; }
.hm-post-content .wp-block-image img { display: block; width: min(100%, 760px); height: auto; margin: 0 auto; }
.hm-topic-note { color: #666; font-size: .9rem; }
@media(max-width: 700px) {
  body.single-post .hm-post-article { padding: 0 18px 54px; }
  body.single-post .hm-post-content { max-width: none; }
  body.single-post .hm-post-article .page-title { padding-top: 28px; }
  .hm-post-content { font-size: 1rem; }
  /* Match the article's 18px mobile gutter so 100vw does not create horizontal scrollbars. */
  .hm-topic-hero { min-height: 160px; margin: 0 -18px 24px; }
  .hm-post-content .wp-block-image { margin: 20px auto 26px; }
}

/* v1.5.65: Keep the Hoisu photo comfortably sized in the topic article. */
body.single-post .hm-post-content img[src*="hoi-smoke-free.png"] {
  display: block;
  box-sizing: border-box;
  width: min(100%, 440px);
  max-width: 440px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Dayori uses the same title grid as the noren page headings. */
body.single-post #content:has(.hm-topic-hero--hashi) {
  container-type: inline-size;
}
.hm-topic-hero.hm-topic-hero--hashi {
  --sleeve: url("../images/dayori-chopsticks-1-5-198.jpg");
  box-sizing: border-box;
  min-height: var(--hm-section-band);
  margin-inline: calc((100% - 100cqw) / 2);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  /* Only the wooden tabletop at the top of the photograph forms the backdrop. */
  background-color: #e8d6bc;
  background-image: linear-gradient(90deg, rgba(255,248,235,.88), rgba(255,248,235,.77) 30%, rgba(255,248,235,.12) 70%, transparent), var(--sleeve);
  background-size: cover, auto max(780px, 61vw);
  background-position: center, center top;
  background-repeat: no-repeat;
}
.hm-topic-hero.hm-topic-hero--hashi::before {
  content: "";
  inset: auto 0 0 auto;
  width: min(78%, 1600px);
  aspect-ratio: 2240 / 541;
  max-height: 100%;
  background: var(--sleeve) center 74% / cover no-repeat;
  mask-image: linear-gradient(to right, transparent, black 12%), linear-gradient(to bottom, transparent, black 18%);
  mask-composite: intersect;
}
body.single-post .hm-topic-hero.hm-topic-hero--hashi h2 {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 90%;
  margin: 0 0 .5em max(3%, calc((100% - 1160px) / 2));
  padding: 0;
  color: #572c24;
  font-size: 28px !important;
  line-height: 1.55 !important;
  letter-spacing: .035em !important;
  text-shadow: none;
}
.hm-topic-hero--hashi h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  width: calc(100% + 5.9em);
  height: 4.32em;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side, rgba(255,248,235,.72), rgba(255,248,235,.52) 43%, transparent);
  pointer-events: none;
}
.hm-topic-hero--hashi h2::after {
  content: "";
  position: absolute;
  bottom: .12em;
  left: 0;
  right: .035em;
  height: 1px;
  background: #a25037;
}
@media (max-width: 767px) {
  body.single-post .hm-topic-hero.hm-topic-hero--hashi h2 { transform: translateY(var(--hm-section-title-shift)); }
  body.single-post .hm-topic-hero.hm-topic-hero--hashi h2 { font-size: 25px !important; }
}
@media (max-width: 760px) {
  body.single-post .hm-topic-hero.hm-topic-hero--hashi h2 { margin-left: 5%; }
}
@media (max-width: 520px) {
  .hm-topic-hero.hm-topic-hero--hashi {
    background-image: linear-gradient(120deg, rgba(255,248,235,.88), rgba(255,248,235,.58) 59%, rgba(255,248,235,.14)), var(--sleeve);
    background-size: cover, auto 520px;
  }
  .hm-topic-hero.hm-topic-hero--hashi::before {
    right: -4%;
    width: 108%;
    mask-image: linear-gradient(to bottom, transparent, black 30%);
  }

}

/* v1.5.298: keep the anniversary X post image readable and centered in article No. 2. */
body.single-post .hm-post-content > .hm-anniversary-x-post {
  display: block;
  box-sizing: border-box;
  width: min(100%, 459px);
  max-width: 459px;
  margin: 24px auto 30px;
  text-align: center;
}
body.single-post .hm-post-content > .hm-anniversary-x-post img {
  display: block;
  width: 100%;
  max-width: 459px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 700px) {
  body.single-post .hm-post-content > .hm-anniversary-x-post { margin: 20px auto 26px; }
}