/* ==================================================
   Todoroki page
   ================================================== */
.p-todoroki {
  --todoroki-ink: #24211d;
  --todoroki-brown: #6f4a31;
  --todoroki-gold: #b79a63;
  --todoroki-paper: #f5f0e7;
  --todoroki-deep: #17231f;
  color: var(--todoroki-ink, #24211d);
  background: #fff;
  overflow: hidden;
}

.p-todoroki__hero {
  min-height: min(74rem, 82vh);
  display: grid;
  place-items: center;
  padding: 14rem 2rem 8rem;
  position: relative;
  background:
    linear-gradient(rgba(12, 20, 18, 0.56), rgba(12, 20, 18, 0.56)),
    url("https://kouei-kimono.com/web-kouei/wp-content/themes/kouei/assets/images/todoroki-header-bg.jpg")
      center/cover no-repeat;
  color: #fff;
  text-align: center;
}
.p-todoroki__hero::after {
  content: "";
  width: 1px;
  height: 7rem;
  position: absolute;
  bottom: -3.5rem;
  left: 50%;
  background-color: #b79a63;
  background-color: var(--todoroki-gold, #b79a63);
}
.p-todoroki__hero-inner {
  max-width: 88rem;
}
.p-todoroki__eyebrow {
  margin-bottom: 2.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.p-todoroki__title-image {
  display: block;
  width: min(34rem, 56vw);
  margin: 0 auto 3rem;
  filter: brightness(0) invert(1);
}
.p-todoroki__hero-copy {
  font-size: clamp(1.6rem, 2vw, 2rem);
  letter-spacing: 0.22em;
  line-height: 2;
}

.p-todoroki__intro,
.p-todoroki__story,
.p-todoroki__profile,
.p-todoroki__lineup {
  padding: 10rem 2rem;
}
.p-todoroki__inner {
  width: min(110rem, 100%);
  margin: 0 auto;
}
.p-todoroki__intro-grid {
  display: grid;
  gap: 5rem;
  align-items: center;
}
.p-todoroki__profile-gallery img,
.p-todoroki__lineup-image img,
.p-todoroki__poster img {
  display: block;
  width: 100%;
  height: auto;
}
.p-todoroki__intro-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  width: 30%;
  margin: auto;
}
.p-todoroki__intro-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: unset;
}

/* Two story photos: equal-size side-by-side tiles */
.p-todoroki__story-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
.p-todoroki__story-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.p-todoroki__story-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.p-todoroki__heading {
  max-width: 15em;
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  line-height: 1.55;
  letter-spacing: 0.13em;
  margin-bottom: 3rem;
  text-wrap: balance;
  word-break: normal;
  line-break: strict;
}
.p-todoroki__heading ruby {
  ruby-position: over;
}
.p-todoroki__heading rt {
  font-size: 0.25em;
  letter-spacing: 0.1em;
}
.p-todoroki__text p {
  line-height: 2.3;
}

.p-todoroki__story {
  position: relative;
}
.p-todoroki__story--dark {
  color: #fff;
  background-color: #17231f;
  background-color: var(--todoroki-deep, #17231f);
}
.p-todoroki__story--paper {
}
.p-todoroki__story-grid {
  display: grid;
  gap: 5rem;
  align-items: center;
}
.p-todoroki__story-label {
  margin-bottom: 2rem;
  color: #b79a63;
  color: var(--todoroki-gold, #b79a63);
  font-size: 1.2rem;
  letter-spacing: 0.35em;
}
.p-todoroki__story-title {
  margin-bottom: 3rem;
  font-size: clamp(2.6rem, 4vw, 4.4rem);
  line-height: 1.5;
  letter-spacing: 0.12em;
}
.p-todoroki__story-title strong {
  font-size: 1.35em;
  font-weight: 500;
}
.p-todoroki__story-subtitle {
  margin-bottom: 2.4rem;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.7;
}
.p-todoroki__story-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.p-todoroki__story-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
}

/* Page-scoped box-sizing reset (prevents padding/border from pushing
   content past 100% width — this is what was pushing 慶佐次興栄について
   past the right edge). Scoped to .p-todoroki only, not :root/global. */
.p-todoroki,
.p-todoroki *,
.p-todoroki *::before,
.p-todoroki *::after {
  box-sizing: border-box;
}

.p-todoroki__profile {
  background: #fff;
  overflow: hidden;
}
.p-todoroki__section-title {
  margin-bottom: 5rem;
  text-align: center;
  font-size: clamp(2.8rem, 4vw, 4rem);
  letter-spacing: 0.16em;
}
.p-todoroki__section-title::after {
  content: "";
  display: block;
  width: 5rem;
  height: 1px;
  margin: 2.5rem auto 0;
  background-color: #b79a63;
  background-color: var(--todoroki-gold, #b79a63);
}
.p-todoroki__profile-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
  width: 100%;
  max-width: 100%;
}
.p-todoroki__profile-gallery li {
}
.p-todoroki__career {
  width: min(80rem, 100%);
  max-width: 100%;
  margin: 0 auto;
  border-top: 1px solid #d9d1c6;
}
.p-todoroki__career li {
  display: grid;
  gap: 0.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid #d9d1c6;
  line-height: 1.8;
  min-width: 0;
}
.p-todoroki__career time {
  display: block;
}
.p-todoroki__career span {
  min-width: 0;
  word-break: break-word;
}
.p-todoroki__career time {
  color: #6f4a31;
  color: var(--todoroki-brown, #6f4a31);
  font-weight: 700;
}

.p-todoroki__lineup {
  text-align: center;
}
.p-todoroki__lineup-lead {
  margin: -2rem 0 5rem;
}
.p-todoroki__lineup-image {
  width: min(90rem, 100%);
  margin: 0 auto 5rem;
}
.p-todoroki__purchase {
  padding: 4rem 2rem;
  background: #fff;
}
.p-todoroki__purchase p {
  margin-bottom: 2rem;
}
.p-todoroki__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(40rem, 100%);
  max-width: 100%;
  padding: 1.8rem 5rem 1.8rem 3rem;
  position: relative;
  border-radius: 999px;
  color: #fff;
  /* Explicit background-color as a guaranteed fallback, with the
     themed variable layered on top — the pill no longer disappears
     if the variable fails to resolve for any reason. */
  background-color: #17231f;
  background-color: var(--todoroki-deep, #17231f);
  text-decoration: none;
}
.p-todoroki__button:visited,
.p-todoroki__button:hover,
.p-todoroki__button:active {
  color: #fff;
}
.p-todoroki__button::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  right: 3rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.p-todoroki__poster {
  width: min(70rem, 100%);
  margin: 5rem auto 0;
}

@media (min-width: 768px) {
  .p-todoroki__intro-grid,
  .p-todoroki__story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-todoroki__story--reverse .p-todoroki__story-copy {
    order: 2;
  }
  .p-todoroki__story--reverse .p-todoroki__story-images {
    order: 1;
  }
  .p-todoroki__career li {
    grid-template-columns: 15rem 1fr;
    gap: 3rem;
  }

  /* Keep the bottle photo from towering over the copy column. */
  .p-todoroki__intro-image img {
    max-width: 60%;
    max-height: 62rem;
    width: auto;
  }
}

@media (max-width: 767px) {
  .p-todoroki__hero {
    min-height: 62rem;
    padding-top: 11rem;
  }
  .p-todoroki__intro,
  .p-todoroki__story,
  .p-todoroki__profile,
  .p-todoroki__lineup {
    padding: 7rem 2rem;
  }

  /* Story sections (創った人 / 想いを継ぐ): single column, natural stacking,
     never wider than the viewport. */
  .p-todoroki__story-grid {
    display: block;
    width: 100%;
  }
  .p-todoroki__story-copy,
  .p-todoroki__story-images {
    width: 100%;
    max-width: 100%;
  }
  .p-todoroki__story-images {
    margin-top: 3rem;
  }
  .p-todoroki__story--reverse .p-todoroki__story-copy,
  .p-todoroki__story--reverse .p-todoroki__story-images {
    order: initial;
  }
  .p-todoroki__story-images {
    gap: 1rem;
  }

  /* Profile / career: single column, no overflow. */
  .p-todoroki__profile {
    background-color: #f5f0e7;
    background-color: var(--todoroki-paper, #f5f0e7);
  }

  .p-todoroki__profile-gallery {
  }
  .p-todoroki__profile-gallery li {
    aspect-ratio: 16 / 10;
  }
  .p-todoroki__career li {
    grid-template-columns: 1fr;
  }
  .p-todoroki__career time {
    margin-bottom: 0.2rem;
  }

  /* Purchase button: full width, comfortably tappable. */
  .p-todoroki__button {
    min-width: 100%;
    width: 100%;
    font-size: 1.3rem;
    padding: 1.6rem 3.5rem 1.6rem 2rem;
  }
}

/* === Todoroki layout fixes 2026-07-15 === */

/* Intro: bottle left, copy right. */
.p-todoroki__intro-grid {
  align-items: start;
}

.p-todoroki__intro-grid > div {
  min-width: 0;
}

/* Prevent story sections from overflowing / shifting to the right. */
.p-todoroki__story,
.p-todoroki__story .p-todoroki__inner,
.p-todoroki__story-grid,
.p-todoroki__story-copy,
.p-todoroki__story-images {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.p-todoroki__story-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* story-images must stay a grid child, not a full-width block.
   (width:100% here previously made it fill the whole row instead of
   just its own grid column, which is what broke "想いを継ぐ".) */
.p-todoroki__story-images {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 768px) {
  .p-todoroki__story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-todoroki__story--reverse .p-todoroki__story-copy {
    order: 2;
  }
  .p-todoroki__story--reverse .p-todoroki__story-images {
    order: 1;
  }
}