/* 04 / JOURNAL — Trial-only 8-Article Free-form Editorial Collage & Stairs Scene
   Scoped strictly to .hamuya-home .journal-editorial. */

.hamuya-home .journal-editorial {
  background: var(--paper, #F4EFE6);
  overflow-x: clip;
}

.hamuya-home .journal-editorial .section-label {
  border-top: 2px solid var(--ink, #34312D);
}

.hamuya-home .journal-editorial .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 45px;
}

.hamuya-home .journal-editorial .section-heading > p {
  font-size: 14px;
  line-height: 2;
  padding-bottom: 12px;
}

.hamuya-home .journal-editorial h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--heading);
}

.hamuya-home .journal-editorial h3::before,
.hamuya-home .journal-editorial h3::after {
  content: none;
}

/* Upper Stage: Left (Hero + Stairs in whitespace) & Right (Slots 2 & 3) */
.hamuya-home .journal-editorial .journal-stage-upper {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 7%;
  align-items: start;
}

.hamuya-home .journal-editorial .journal-upper-main {
  min-width: 0;
}

.hamuya-home .journal-editorial .journal-upper-stack {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 24px;
  min-width: 0;
}

/* Stairs Scene in the whitespace below the main hero article */
.hamuya-home .journal-editorial .journal-stairs-scene {
  margin-top: 34px;
  padding: 4px 0 8px 4%;
  max-width: 100%;
  pointer-events: none;
}

.hamuya-home .journal-editorial .stairs-svg {
  display: block;
  width: min(100%, 320px);
  height: auto;
  aspect-ratio: 220 / 136;
  overflow: visible;
}

.hamuya-home .journal-editorial .stairs-traveler,
.hamuya-home .journal-editorial .stairs-person,
.hamuya-home .journal-editorial .stairs-leg-front,
.hamuya-home .journal-editorial .stairs-leg-back,
.hamuya-home .journal-editorial .stairs-arm-front,
.hamuya-home .journal-editorial .stairs-arm-back {
  transform-box: view-box;
}

/* Default / final resting state: standing at the bottom landing (step 6) */
.hamuya-home .journal-editorial .stairs-traveler {
  transform: translate(142px, 72px);
}

.hamuya-home .journal-editorial .stairs-person {
  transform-origin: 28px 34px;
}

.hamuya-home .journal-editorial .stairs-leg-front {
  transform-origin: 29px 33px;
}

.hamuya-home .journal-editorial .stairs-leg-back {
  transform-origin: 27px 33px;
}

.hamuya-home .journal-editorial .stairs-arm-front {
  transform-origin: 27.5px 18.5px;
}

.hamuya-home .journal-editorial .stairs-arm-back {
  transform-origin: 28px 19px;
}

/* Triggered once when scrolled into view: descend 6 steps and pause at the bottom */
.hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-traveler {
  animation: hamuya-trial-journal-stairs-descend 4.5s linear forwards;
}

.hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-person {
  animation: hamuya-trial-journal-stairs-posture 4.5s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-leg-front {
  animation: hamuya-trial-journal-stairs-leg-f 4.5s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-leg-back {
  animation: hamuya-trial-journal-stairs-leg-b 4.5s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-arm-front {
  animation: hamuya-trial-journal-stairs-arm-f 4.5s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-arm-back {
  animation: hamuya-trial-journal-stairs-arm-b 4.5s ease-in-out forwards;
}

@keyframes hamuya-trial-journal-stairs-descend {
  0%, 4% { transform: translate(0px, 0px); }
  9% { transform: translate(12px, 3px); }
  14% { transform: translate(22px, 12px); }
  16% { transform: translate(22px, 12px); }
  21% { transform: translate(34px, 15px); }
  26% { transform: translate(44px, 24px); }
  28% { transform: translate(44px, 24px); }
  33% { transform: translate(56px, 27px); }
  38% { transform: translate(66px, 36px); }
  47% { transform: translate(66px, 36px); }
  52% { transform: translate(78px, 39px); }
  57% { transform: translate(88px, 48px); }
  59% { transform: translate(88px, 48px); }
  64% { transform: translate(100px, 51px); }
  69% { transform: translate(110px, 60px); }
  71% { transform: translate(110px, 60px); }
  76% { transform: translate(122px, 63px); }
  82% { transform: translate(132px, 72px); }
  86% { transform: translate(132px, 72px); }
  93%, 100% { transform: translate(142px, 72px); }
}

@keyframes hamuya-trial-journal-stairs-posture {
  0%, 4% { transform: translateY(0) rotate(2deg); }
  14% { transform: translateY(1.6px) rotate(3.5deg); }
  16% { transform: translateY(0) rotate(2deg); }
  26% { transform: translateY(1.6px) rotate(3.5deg); }
  28% { transform: translateY(0) rotate(2deg); }
  38% { transform: translateY(1.8px) rotate(3deg); }
  43%, 47% { transform: translateY(0.5px) rotate(-1deg); }
  57% { transform: translateY(1.6px) rotate(3.5deg); }
  59% { transform: translateY(0) rotate(2deg); }
  69% { transform: translateY(1.6px) rotate(3.5deg); }
  71% { transform: translateY(0) rotate(2deg); }
  82% { transform: translateY(2px) rotate(3deg); }
  92% { transform: translateY(-0.8px) rotate(-2.2deg); }
  100% { transform: translateY(0) rotate(-1.2deg); }
}

@keyframes hamuya-trial-journal-stairs-leg-f {
  0%, 4% { transform: rotate(0deg); }
  9% { transform: rotate(-20deg); }
  14%, 16% { transform: rotate(8deg); }
  21% { transform: rotate(16deg); }
  26%, 28% { transform: rotate(-6deg); }
  33% { transform: rotate(-20deg); }
  38%, 47% { transform: rotate(0deg); }
  52% { transform: rotate(-20deg); }
  57%, 59% { transform: rotate(8deg); }
  64% { transform: rotate(16deg); }
  69%, 71% { transform: rotate(-6deg); }
  76% { transform: rotate(-20deg); }
  82%, 86% { transform: rotate(6deg); }
  90% { transform: rotate(-10deg); }
  95%, 100% { transform: rotate(0deg); }
}

@keyframes hamuya-trial-journal-stairs-leg-b {
  0%, 4% { transform: rotate(0deg); }
  9% { transform: rotate(16deg); }
  14%, 16% { transform: rotate(-8deg); }
  21% { transform: rotate(-20deg); }
  26%, 28% { transform: rotate(6deg); }
  33% { transform: rotate(16deg); }
  38%, 47% { transform: rotate(0deg); }
  52% { transform: rotate(16deg); }
  57%, 59% { transform: rotate(-8deg); }
  64% { transform: rotate(-20deg); }
  69%, 71% { transform: rotate(6deg); }
  76% { transform: rotate(16deg); }
  82%, 86% { transform: rotate(-6deg); }
  90% { transform: rotate(10deg); }
  95%, 100% { transform: rotate(0deg); }
}

@keyframes hamuya-trial-journal-stairs-arm-f {
  0%, 4% { transform: rotate(0deg); }
  14% { transform: rotate(10deg); }
  26% { transform: rotate(-8deg); }
  38%, 47% { transform: rotate(-14deg); }
  57% { transform: rotate(10deg); }
  69% { transform: rotate(-8deg); }
  82% { transform: rotate(8deg); }
  93%, 100% { transform: rotate(-16deg); }
}

@keyframes hamuya-trial-journal-stairs-arm-b {
  0%, 4% { transform: rotate(0deg); }
  14% { transform: rotate(-12deg); }
  26% { transform: rotate(12deg); }
  38%, 47% { transform: rotate(4deg); }
  57% { transform: rotate(-12deg); }
  69% { transform: rotate(12deg); }
  82% { transform: rotate(-8deg); }
  93%, 100% { transform: rotate(4deg); }
}

/* Lower Stage: Continuous Editorial Collage (Slots 4–8) */
.hamuya-home .journal-editorial .journal-stage-collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 56px;
  align-items: start;
  margin-top: 36px;
}

.hamuya-home .journal-editorial .journal-stage-collage [data-slot="4"] {
  grid-column: 1 / span 4;
}

.hamuya-home .journal-editorial .journal-stage-collage [data-slot="5"] {
  grid-column: 5 / span 5;
}

.hamuya-home .journal-editorial .journal-stage-collage [data-slot="6"] {
  grid-column: 10 / span 3;
}

.hamuya-home .journal-editorial .journal-stage-collage [data-slot="7"] {
  grid-column: 2 / span 4;
}

.hamuya-home .journal-editorial .journal-stage-collage [data-slot="8"] {
  grid-column: 7 / span 6;
}

/* Vertical rhythm / offset modifiers */
.hamuya-home .journal-editorial .journal-card[data-offset="pull-up"] {
  margin-top: -16px;
}

.hamuya-home .journal-editorial .journal-card[data-offset="down-xs"] {
  margin-top: 18px;
}

.hamuya-home .journal-editorial .journal-card[data-offset="down-sm"] {
  margin-top: 28px;
}

.hamuya-home .journal-editorial .journal-card[data-offset="down-md"] {
  margin-top: 60px;
}

.hamuya-home .journal-editorial .journal-card[data-offset="indent"] {
  margin-top: -8px;
}

/* Staircase ② (Middle Right, below Slot 6) & Staircase ③ (Bottom Left, below Slot 7) */
.hamuya-home .journal-editorial .journal-stairs-mid {
  margin: 30px 0 -22px -86px;
  padding: 0;
  width: 320px;
  max-width: none;
  pointer-events: none;
}

.hamuya-home .journal-editorial .stairs-mid-svg {
  display: block;
  width: 320px;
  height: auto;
  aspect-ratio: 230 / 136;
  overflow: visible;
}

.hamuya-home .journal-editorial .journal-stairs-bottom {
  margin: 30px 0 -46px 72px;
  padding: 0;
  width: 340px;
  max-width: none;
  pointer-events: none;
}

.hamuya-home .journal-editorial .stairs-bottom-svg {
  display: block;
  width: 340px;
  height: auto;
  aspect-ratio: 244 / 148;
  overflow: visible;
}

.hamuya-home .journal-editorial .stairs-traveler-mid,
.hamuya-home .journal-editorial .stairs-person-mid,
.hamuya-home .journal-editorial .stairs-leg-front-mid,
.hamuya-home .journal-editorial .stairs-leg-back-mid,
.hamuya-home .journal-editorial .stairs-arm-front-mid,
.hamuya-home .journal-editorial .stairs-arm-back-mid,
.hamuya-home .journal-editorial .stairs-traveler-bottom,
.hamuya-home .journal-editorial .stairs-person-bottom,
.hamuya-home .journal-editorial .stairs-torso-bottom,
.hamuya-home .journal-editorial .stairs-leg-front-bottom,
.hamuya-home .journal-editorial .stairs-leg-back-bottom,
.hamuya-home .journal-editorial .stairs-arm-front-bottom,
.hamuya-home .journal-editorial .stairs-arm-back-bottom {
  transform-box: view-box;
}

/* Default / resting positions for Staircase ② and ③ */
.hamuya-home .journal-editorial .stairs-traveler-mid {
  transform: translate(-144px, 70px);
}

.hamuya-home .journal-editorial .stairs-person-mid {
  transform-origin: 28px 34px;
}

.hamuya-home .journal-editorial .stairs-leg-front-mid {
  transform-origin: 29px 33px;
}

.hamuya-home .journal-editorial .stairs-leg-back-mid {
  transform-origin: 27px 33px;
}

.hamuya-home .journal-editorial .stairs-arm-front-mid {
  transform-origin: 27.5px 18.5px;
}

.hamuya-home .journal-editorial .stairs-arm-back-mid {
  transform-origin: 28px 19px;
}

.hamuya-home .journal-editorial .stairs-traveler-bottom {
  transform: translate(154px, 77px);
}

.hamuya-home .journal-editorial .stairs-person-bottom {
  transform-origin: 28px 47.5px;
}

.hamuya-home .journal-editorial .stairs-torso-bottom {
  transform-origin: 28px 33px;
}

.hamuya-home .journal-editorial .stairs-leg-front-bottom {
  transform-origin: 29px 33px;
}

.hamuya-home .journal-editorial .stairs-leg-back-bottom {
  transform-origin: 27px 33px;
}

.hamuya-home .journal-editorial .stairs-arm-front-bottom {
  transform-origin: 27px 18.5px;
}

.hamuya-home .journal-editorial .stairs-arm-back-bottom {
  transform-origin: 29px 18.5px;
}

/* Staircase ② Animation: Brisk 5-step descent from top-right to bottom-left (2.75s) */
.hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-traveler-mid {
  animation: hamuya-trial-journal-stairs-descend-mid 2.75s linear forwards;
}

.hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-person-mid {
  animation: hamuya-trial-journal-stairs-posture-mid 2.75s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-leg-front-mid {
  animation: hamuya-trial-journal-stairs-leg-f-mid 2.75s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-leg-back-mid {
  animation: hamuya-trial-journal-stairs-leg-b-mid 2.75s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-arm-front-mid {
  animation: hamuya-trial-journal-stairs-arm-f-mid 2.75s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-arm-back-mid {
  animation: hamuya-trial-journal-stairs-arm-b-mid 2.75s ease-in-out forwards;
}

@keyframes hamuya-trial-journal-stairs-descend-mid {
  0%, 3% { transform: translate(0px, 0px); }
  9% { transform: translate(-14px, 4px); }
  16%, 18% { transform: translate(-26px, 14px); }
  25% { transform: translate(-40px, 18px); }
  32%, 34% { transform: translate(-52px, 28px); }
  41% { transform: translate(-66px, 32px); }
  48%, 50% { transform: translate(-78px, 42px); }
  57% { transform: translate(-92px, 46px); }
  64%, 66% { transform: translate(-104px, 56px); }
  73% { transform: translate(-118px, 60px); }
  81%, 84% { transform: translate(-130px, 70px); }
  93%, 100% { transform: translate(-144px, 70px); }
}

@keyframes hamuya-trial-journal-stairs-posture-mid {
  0%, 3% { transform: translateY(0) rotate(-3deg); }
  16% { transform: translateY(1.8px) rotate(-4.5deg); }
  25% { transform: translateY(-0.5px) rotate(-3deg); }
  32% { transform: translateY(1.8px) rotate(-4.5deg); }
  41% { transform: translateY(-0.5px) rotate(-3deg); }
  48% { transform: translateY(1.8px) rotate(-4.5deg); }
  57% { transform: translateY(-0.5px) rotate(-3deg); }
  64% { transform: translateY(1.8px) rotate(-4.5deg); }
  73% { transform: translateY(-0.5px) rotate(-3deg); }
  81% { transform: translateY(2.2px) rotate(-3.5deg); }
  93% { transform: translateY(-0.6px) rotate(1.5deg); }
  100% { transform: translateY(0) rotate(0.8deg); }
}

@keyframes hamuya-trial-journal-stairs-leg-f-mid {
  0%, 3% { transform: rotate(0deg); }
  9% { transform: rotate(-22deg); }
  16% { transform: rotate(10deg); }
  25% { transform: rotate(18deg); }
  32% { transform: rotate(-8deg); }
  41% { transform: rotate(-22deg); }
  48% { transform: rotate(10deg); }
  57% { transform: rotate(18deg); }
  64% { transform: rotate(-8deg); }
  73% { transform: rotate(-22deg); }
  81% { transform: rotate(8deg); }
  88% { transform: rotate(-12deg); }
  94%, 100% { transform: rotate(0deg); }
}

@keyframes hamuya-trial-journal-stairs-leg-b-mid {
  0%, 3% { transform: rotate(0deg); }
  9% { transform: rotate(18deg); }
  16% { transform: rotate(-10deg); }
  25% { transform: rotate(-22deg); }
  32% { transform: rotate(8deg); }
  41% { transform: rotate(18deg); }
  48% { transform: rotate(-10deg); }
  57% { transform: rotate(-22deg); }
  64% { transform: rotate(8deg); }
  73% { transform: rotate(18deg); }
  81% { transform: rotate(-8deg); }
  88% { transform: rotate(12deg); }
  94%, 100% { transform: rotate(0deg); }
}

@keyframes hamuya-trial-journal-stairs-arm-f-mid {
  0%, 3% { transform: rotate(0deg); }
  16% { transform: rotate(14deg); }
  32% { transform: rotate(-12deg); }
  48% { transform: rotate(14deg); }
  64% { transform: rotate(-12deg); }
  81% { transform: rotate(10deg); }
  94%, 100% { transform: rotate(-10deg); }
}

@keyframes hamuya-trial-journal-stairs-arm-b-mid {
  0%, 3% { transform: rotate(0deg); }
  16% { transform: rotate(-16deg); }
  32% { transform: rotate(14deg); }
  48% { transform: rotate(-16deg); }
  64% { transform: rotate(14deg); }
  81% { transform: rotate(-10deg); }
  94%, 100% { transform: rotate(5deg); }
}

/* Staircase ③ Animation (7.4s) */
.hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-traveler-bottom {
  animation: hamuya-trial-journal-stairs-descend-bottom 7.4s linear forwards;
}

.hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-person-bottom {
  animation: hamuya-trial-journal-stairs-posture-bottom 7.4s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-torso-bottom {
  animation: hamuya-trial-journal-stairs-torso-bottom 7.4s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-leg-front-bottom {
  animation: hamuya-trial-journal-stairs-leg-f-bottom 7.4s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-leg-back-bottom {
  animation: hamuya-trial-journal-stairs-leg-b-bottom 7.4s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-arm-front-bottom {
  animation: hamuya-trial-journal-stairs-arm-f-bottom 7.4s ease-in-out forwards;
}

.hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-arm-back-bottom {
  animation: hamuya-trial-journal-stairs-arm-b-bottom 7.4s ease-in-out forwards;
}

@keyframes hamuya-trial-journal-stairs-descend-bottom {
  0%, 3% { transform: translate(0px, 0px); }
  6% { transform: translate(11px, 3px); }
  9%, 11% { transform: translate(20px, 11px); }
  14% { transform: translate(31px, 14px); }
  17%, 22% { transform: translate(40px, 22px); }
  25% { transform: translate(51px, 25px); }
  28%, 30% { transform: translate(60px, 33px); }
  33% { transform: translate(71px, 36px); }
  36%, 38% { transform: translate(80px, 44px); }
  41% { transform: translate(91px, 47px); }
  44%, 49% { transform: translate(100px, 55px); }
  52% { transform: translate(111px, 58px); }
  55%, 57% { transform: translate(120px, 66px); }
  60% { transform: translate(131px, 69px); }
  62% { transform: translate(140px, 77px); }
  65%, 100% { transform: translate(154px, 77px); }
}

@keyframes hamuya-trial-journal-stairs-posture-bottom {
  0%, 3% { transform: translateY(0); }
  9% { transform: translateY(1.3px); }
  17% { transform: translateY(1.4px); }
  20%, 22% { transform: translateY(0.2px); }
  28% { transform: translateY(1.3px); }
  36% { transform: translateY(1.3px); }
  44% { transform: translateY(1.4px); }
  47%, 49% { transform: translateY(0.2px); }
  55% { transform: translateY(1.3px); }
  62% { transform: translateY(1.5px); }
  65%, 100% { transform: translateY(0); }
}

@keyframes hamuya-trial-journal-stairs-torso-bottom {
  0%, 3% { transform: rotate(1.5deg); }
  9%, 17% { transform: rotate(2.4deg); }
  20%, 22% { transform: rotate(-0.8deg); }
  28%, 44% { transform: rotate(2.4deg); }
  47%, 49% { transform: rotate(-0.8deg); }
  55%, 62% { transform: rotate(2.2deg); }
  65%, 72% { transform: rotate(0deg); }
  79%, 100% { transform: rotate(-1.5deg); }
}

@keyframes hamuya-trial-journal-stairs-leg-f-bottom {
  0%, 3% { transform: rotate(0deg); }
  6% { transform: rotate(-17deg); }
  9%, 11% { transform: rotate(6deg); }
  14% { transform: rotate(14deg); }
  17%, 22% { transform: rotate(0deg); }
  25% { transform: rotate(-17deg); }
  28%, 30% { transform: rotate(6deg); }
  33% { transform: rotate(14deg); }
  36%, 38% { transform: rotate(-5deg); }
  41% { transform: rotate(-17deg); }
  44%, 49% { transform: rotate(0deg); }
  52% { transform: rotate(-17deg); }
  55%, 57% { transform: rotate(6deg); }
  60% { transform: rotate(14deg); }
  62% { transform: rotate(4deg); }
  63.5% { transform: rotate(-8deg); }
  65%, 100% { transform: rotate(0deg); }
}

@keyframes hamuya-trial-journal-stairs-leg-b-bottom {
  0%, 3% { transform: rotate(0deg); }
  6% { transform: rotate(14deg); }
  9%, 11% { transform: rotate(-6deg); }
  14% { transform: rotate(-17deg); }
  17%, 22% { transform: rotate(0deg); }
  25% { transform: rotate(14deg); }
  28%, 30% { transform: rotate(-6deg); }
  33% { transform: rotate(-17deg); }
  36%, 38% { transform: rotate(5deg); }
  41% { transform: rotate(14deg); }
  44%, 49% { transform: rotate(0deg); }
  52% { transform: rotate(14deg); }
  55%, 57% { transform: rotate(-6deg); }
  60% { transform: rotate(-17deg); }
  62% { transform: rotate(-4deg); }
  63.5% { transform: rotate(8deg); }
  65%, 100% { transform: rotate(0deg); }
}

@keyframes hamuya-trial-journal-stairs-arm-f-bottom {
  0%, 3% { transform: rotate(0deg); }
  9% { transform: rotate(10deg); }
  17%, 22% { transform: rotate(-6deg); }
  28% { transform: rotate(10deg); }
  36% { transform: rotate(-8deg); }
  44%, 49% { transform: rotate(-5deg); }
  55% { transform: rotate(10deg); }
  62% { transform: rotate(-6deg); }
  65%, 72% { transform: rotate(0deg); }
  78% { transform: rotate(-203deg); }
  80%, 100% { transform: rotate(-198deg); }
}

@keyframes hamuya-trial-journal-stairs-arm-b-bottom {
  0%, 3% { transform: rotate(0deg); }
  9% { transform: rotate(-10deg); }
  17%, 22% { transform: rotate(5deg); }
  28% { transform: rotate(-10deg); }
  36% { transform: rotate(10deg); }
  44%, 49% { transform: rotate(4deg); }
  55% { transform: rotate(-10deg); }
  62% { transform: rotate(6deg); }
  65%, 72% { transform: rotate(0deg); }
  78% { transform: rotate(-141deg); }
  80%, 100% { transform: rotate(-136deg); }
}

/* Base Card & Full-card Clickable Link */
.hamuya-home .journal-editorial .journal-card {
  min-width: 0;
}

.hamuya-home .journal-editorial .journal-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hamuya-home .journal-editorial .journal-card-link:hover {
  text-decoration: none;
}

.hamuya-home .journal-editorial .journal-card-link:hover .journal-card-title {
  color: #C8392A;
}

.hamuya-home .journal-editorial .journal-card-link:focus-visible {
  outline: 3px solid #C8392A;
  outline-offset: 6px;
}

/* Sharp Photo Framing & Missing-Image Fallback */
.hamuya-home .journal-editorial .journal-photo-wrap {
  width: 100%;
  overflow: hidden;
  background: #E5DED2;
  border-radius: 0;
  box-shadow: none;
}

.hamuya-home .journal-editorial .journal-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

.hamuya-home .journal-editorial .journal-photo-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: linear-gradient(135deg, #EAE2D4 0%, #DFD4C3 100%);
  border: 1px solid #D7CEC1;
  color: #686059;
  text-align: center;
}

.hamuya-home .journal-editorial .journal-photo-fallback-brand {
  font-family: var(--heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #C8392A;
}

.hamuya-home .journal-editorial .journal-photo-fallback-sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #686059;
}

/* Decoupled Crop Ratio Modifiers */
.hamuya-home .journal-editorial .journal-card[data-crop="4-3"] .journal-photo {
  aspect-ratio: 4 / 3;
}

.hamuya-home .journal-editorial .journal-card[data-crop="16-10"] .journal-photo {
  aspect-ratio: 16 / 10;
}

.hamuya-home .journal-editorial .journal-card[data-crop="3-4"] .journal-photo {
  aspect-ratio: 3 / 4;
}

.hamuya-home .journal-editorial .journal-card[data-crop="1-1"] .journal-photo {
  aspect-ratio: 1 / 1;
}

/* Meta Bar: Featured Badge, Latest Badge, Category Name, Publication Date */
.hamuya-home .journal-editorial .journal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.hamuya-home .journal-editorial .journal-card[data-size="hero"] .journal-meta {
  margin-top: 22px;
}

.hamuya-home .journal-editorial .journal-featured-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #C8392A;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.hamuya-home .journal-editorial .journal-latest-badge {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #C8392A;
  background: #FFFDF9;
  color: #C8392A;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.hamuya-home .journal-editorial .journal-group {
  color: #C8392A;
  font-weight: 700;
}

.hamuya-home .journal-editorial .journal-date {
  color: var(--muted, #686059);
  font-weight: 500;
}

/* Decoupled Typography Scale by Card Size */
.hamuya-home .journal-editorial .journal-card-title {
  margin-top: 10px;
  font-family: var(--heading);
  font-weight: 700;
  color: var(--ink, #34312D);
  overflow-wrap: anywhere;
}

.hamuya-home .journal-editorial .journal-card[data-size="hero"] .journal-card-title {
  margin-top: 12px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.hamuya-home .journal-editorial .journal-card[data-size="wide"] .journal-card-title {
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.6;
  letter-spacing: -0.015em;
}

.hamuya-home .journal-editorial .journal-card[data-size="medium"] .journal-card-title,
.hamuya-home .journal-editorial .journal-card[data-size="tall"] .journal-card-title {
  margin-top: 8px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.hamuya-home .journal-editorial .journal-card[data-size="compact"] .journal-card-title {
  margin-top: 8px;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.hamuya-home .journal-editorial .journal-empty {
  font-size: 14px;
  color: var(--muted, #686059);
  padding: 24px 0;
}

/* Bottom Archive CTA Link */
.hamuya-home .journal-editorial .journal-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 64px;
}

.hamuya-home .journal-editorial .journal-more-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  color: #C8392A;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

.hamuya-home .journal-editorial .journal-more-link:hover {
  color: #AB2F23;
  text-decoration: none;
}

.hamuya-home .journal-editorial .journal-more-link:focus-visible {
  outline: 3px solid var(--ink, #34312D);
  outline-offset: 5px;
}

/* Tablet Intermediate Breakpoint */
@media (max-width: 1024px) and (min-width: 761px) {
  .hamuya-home .journal-editorial .journal-stage-upper {
    gap: 5%;
  }
  .hamuya-home .journal-editorial .journal-upper-stack {
    padding-top: 0;
    gap: 40px;
  }
  .hamuya-home .journal-editorial .journal-stairs-scene {
    margin-top: 28px;
    padding-left: 2%;
  }
  .hamuya-home .journal-editorial .journal-stage-collage {
    column-gap: 24px;
    row-gap: 48px;
    margin-top: 32px;
  }
  .hamuya-home .journal-editorial .journal-stage-collage [data-slot="4"] {
    grid-column: 1 / span 5;
    margin-top: 0;
  }
  .hamuya-home .journal-editorial .journal-stage-collage [data-slot="5"] {
    grid-column: 6 / span 7;
    margin-top: 36px;
  }
  .hamuya-home .journal-editorial .journal-stage-collage [data-slot="6"] {
    grid-column: 1 / span 5;
    margin-top: 0;
  }
  .hamuya-home .journal-editorial .journal-stage-collage [data-slot="7"] {
    grid-column: 6 / span 7;
    margin-top: 24px;
  }
  .hamuya-home .journal-editorial .journal-stage-collage [data-slot="8"] {
    grid-column: 2 / span 10;
    margin-top: 0;
  }
  .hamuya-home .journal-editorial .journal-stairs-mid {
    width: 260px;
    max-width: 100%;
    margin: 22px 0 0;
  }
  .hamuya-home .journal-editorial .stairs-mid-svg {
    width: 100%;
  }
  .hamuya-home .journal-editorial .journal-stairs-bottom {
    width: 280px;
    max-width: 100%;
    margin: 24px 0 0 20px;
  }
  .hamuya-home .journal-editorial .stairs-bottom-svg {
    width: 100%;
  }
}

/* Smartphone (320px–430px focus, up to 760px):
   - Zero horizontal scroll
   - Asymmetric photo sizing & left/right stagger so photos never become oversized
   - Controlled vertical spacing so 8 articles remain easy to browse
   - Clear, readable article titles */
@media (max-width: 760px) {
  .hamuya-home .journal-editorial .section-heading {
    display: block;
    margin-bottom: 32px;
  }
  .hamuya-home .journal-editorial .section-heading > p {
    margin-top: 20px;
    padding: 0;
    line-height: 1.95;
  }
  .hamuya-home .journal-editorial .journal-stage-upper {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .hamuya-home .journal-editorial .journal-upper-stack {
    gap: 28px;
    padding-top: 0;
  }
  .hamuya-home .journal-editorial .journal-stage-collage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
    margin-top: 30px;
  }
  .hamuya-home .journal-editorial .journal-stage-collage .journal-card {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  /* Constrain photo sizes & create subtle left/right editorial stagger on mobile */
  .hamuya-home .journal-editorial .journal-card[data-size="hero"] {
    width: 100%;
    max-width: 440px;
  }
  .hamuya-home .journal-editorial .journal-card[data-size="medium"] {
    width: 86%;
    max-width: 340px;
  }
  .hamuya-home .journal-editorial .journal-card[data-slot="2"] {
    margin-left: auto;
  }
  .hamuya-home .journal-editorial .journal-card[data-size="tall"] {
    width: 82%;
    max-width: 310px;
    margin-left: auto !important;
  }
  .hamuya-home .journal-editorial .journal-card[data-size="wide"] {
    width: 92%;
    max-width: 390px;
  }
  .hamuya-home .journal-editorial .journal-card[data-slot="8"] {
    margin-left: auto !important;
  }
  .hamuya-home .journal-editorial .journal-card[data-size="compact"] {
    width: 78%;
    max-width: 290px;
  }
  .hamuya-home .journal-editorial .journal-card[data-slot="6"] {
    margin-left: auto !important;
  }

  /* Balanced aspect ratios on smartphone to keep vertical height compact */
  .hamuya-home .journal-editorial .journal-card[data-crop="4-3"] .journal-photo,
  .hamuya-home .journal-editorial .journal-card[data-crop="16-10"] .journal-photo,
  .hamuya-home .journal-editorial .journal-card[data-crop="1-1"] .journal-photo {
    aspect-ratio: 16 / 10;
  }
  .hamuya-home .journal-editorial .journal-card[data-crop="3-4"] .journal-photo {
    aspect-ratio: 4 / 3;
  }

  /* Compact, overflow-safe stairs scenes between cards */
  .hamuya-home .journal-editorial .journal-stairs-scene {
    margin: 14px 4px -6px auto;
    padding: 0;
    width: min(100%, 216px);
    overflow: hidden;
  }
  .hamuya-home .journal-editorial .stairs-svg {
    width: 100%;
    height: auto;
  }
  .hamuya-home .journal-editorial .journal-stairs-mid {
    margin: 14px auto -6px 0;
    width: min(100%, 208px);
    overflow: hidden;
  }
  .hamuya-home .journal-editorial .stairs-mid-svg {
    width: 100%;
    height: auto;
  }
  .hamuya-home .journal-editorial .journal-stairs-bottom {
    margin: 14px 0 -6px auto;
    width: min(100%, 216px);
    overflow: hidden;
  }
  .hamuya-home .journal-editorial .stairs-bottom-svg {
    width: 100%;
    height: auto;
  }

  .hamuya-home .journal-editorial .journal-meta,
  .hamuya-home .journal-editorial .journal-card[data-size="hero"] .journal-meta {
    margin-top: 12px;
    gap: 6px 10px;
    font-size: 11px;
  }

  .hamuya-home .journal-editorial .journal-card[data-size="hero"] .journal-card-title {
    margin-top: 8px;
    font-size: clamp(18px, 4.8vw, 20px);
    line-height: 1.55;
  }
  .hamuya-home .journal-editorial .journal-card[data-size="wide"] .journal-card-title,
  .hamuya-home .journal-editorial .journal-card[data-size="medium"] .journal-card-title,
  .hamuya-home .journal-editorial .journal-card[data-size="tall"] .journal-card-title,
  .hamuya-home .journal-editorial .journal-card[data-size="compact"] .journal-card-title {
    margin-top: 6px;
    font-size: clamp(16px, 4.3vw, 18px);
    line-height: 1.6;
  }

  .hamuya-home .journal-editorial .journal-more {
    margin-top: 36px;
    justify-content: flex-start;
  }
  .hamuya-home .journal-editorial .journal-more-link {
    gap: 16px;
  }
}

/* Reduced Motion: No animation, stay standing calmly at the bottom landing */
@media (prefers-reduced-motion: reduce) {
  .hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-traveler {
    animation: none !important;
    transform: translate(142px, 72px) !important;
  }
  .hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-traveler-mid {
    animation: none !important;
    transform: translate(-144px, 70px) !important;
  }
  .hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-traveler-bottom {
    animation: none !important;
    transform: translate(154px, 77px) !important;
  }
  .hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-person,
  .hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-leg-front,
  .hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-leg-back,
  .hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-arm-front,
  .hamuya-home .journal-editorial .journal-stairs-scene.is-descending .stairs-arm-back,
  .hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-person-mid,
  .hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-leg-front-mid,
  .hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-leg-back-mid,
  .hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-arm-front-mid,
  .hamuya-home .journal-editorial .journal-stairs-mid.is-descending .stairs-arm-back-mid,
  .hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-person-bottom,
  .hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-torso-bottom,
  .hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-leg-front-bottom,
  .hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-leg-back-bottom,
  .hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-arm-front-bottom,
  .hamuya-home .journal-editorial .journal-stairs-bottom.is-descending .stairs-arm-back-bottom {
    animation: none !important;
  }
}

/* Japanese trial: same fetched cards, latest three on mobile; desktop rules unchanged. */
.hamuya-home .journal-responsive-stage { display: contents; }
.hamuya-home .journal-mobile-extra { display: none; }
@media (max-width: 959px) {
  .hamuya-home .journal-mobile-latest .journal-responsive-stage { display: flex; flex-direction: column; gap: 28px; }
  .hamuya-home .journal-mobile-latest :is(.journal-stage-upper,.journal-upper-main,.journal-upper-stack,.journal-stage-collage) { display: contents; }
  .hamuya-home .journal-mobile-latest .journal-card { display: none; }
  .hamuya-home .journal-mobile-latest .journal-card:is([data-mobile-rank="1"],[data-mobile-rank="2"],[data-mobile-rank="3"]) {
    display: block; width: 86%; max-width: 440px; margin: 0 !important; align-self: flex-start;
  }
  .hamuya-home .journal-mobile-latest .journal-card[data-mobile-rank="1"] { order: 1; width: 100%; }
  .hamuya-home .journal-mobile-latest .journal-card[data-mobile-rank="2"] { order: 2; align-self: flex-end; }
  .hamuya-home .journal-mobile-latest .journal-card[data-mobile-rank="3"] { order: 3; }
  .hamuya-home .journal-mobile-latest .journal-card .journal-photo { aspect-ratio: 16 / 10; }
  .hamuya-home .journal-mobile-latest .journal-stairs-scene {
    order: 4; width: min(100%, 216px); margin: 0 0 0 auto; padding: 16px 0; overflow: visible;
  }
  .hamuya-home .journal-mobile-latest .stairs-svg { width: 100%; height: auto; overflow: visible; }
  .hamuya-home .journal-mobile-latest :is(.journal-stairs-mid,.journal-stairs-bottom) { display: none; }
  .hamuya-home .journal-mobile-latest .journal-more { margin-top: 36px; }
}