/* Reversible editorial story: scoped to the decorative homepage stage. */
.tw-scroll-story { display:none; }
body.tw-motion-v5-ready .tw-scroll-story { display:block; }
.tw-scroll-story__track { position:relative; height:540svh; background:#f6f7f3; }
.tw-scroll-story__stage { position:sticky; top:0; height:100svh; min-height:540px; overflow:hidden; isolation:isolate; background:#f6f7f3; color:#182822; }
.tw-scroll-story__scenes { position:absolute; inset:0; }
.tw-scroll-story__scene { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:stretch; gap:clamp(22px,5vw,76px); padding:clamp(58px,8vh,96px) max(5vw,calc((100vw - 1320px)/2)); margin:0; visibility:hidden; }
.tw-scroll-story__photo { position:relative; grid-column:2; grid-row:1; min-width:0; overflow:hidden; background:#dce2dc; }
.tw-scroll-story__photo::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#18282200 65%,#18282218); }
.tw-scroll-story__photo img { display:block; width:100%; height:100%; object-fit:cover; scale:1.06; transform-origin:center; }
.tw-scroll-story__cue { z-index:1; grid-column:1; grid-row:1; align-self:center; max-width:32rem; padding:clamp(20px,3vw,44px) 0; color:#182822; }
.tw-scroll-story__number { display:flex; align-items:center; gap:12px; margin:0 0 clamp(22px,4vh,42px); color:#5b655f; font-size:.72rem; letter-spacing:.16em; }
.tw-scroll-story__number::before { content:""; width:2.2rem; height:1px; background:#215a43; }
.tw-scroll-story__cue h2 { max-width:12em; margin:0; font:inherit; font-family:Georgia,"Noto Serif JP",serif; font-size:clamp(2rem,4vw,4.15rem); font-weight:400; line-height:1.48; letter-spacing:.015em; text-wrap:balance; }
.tw-scroll-story__detail { max-width:34rem; margin:1.5rem 0 0; color:#46534c; font-size:clamp(.9rem,1.1vw,1.04rem); line-height:2.05; }
.tw-scroll-story__rail { position:absolute; z-index:2; inset:auto 5vw 30px; display:flex; align-items:center; gap:16px; color:#5b655f; font-size:.68rem; letter-spacing:.12em; }
.tw-scroll-story__step { min-width:4.5em; font-variant-numeric:tabular-nums; }
.tw-scroll-story__progress { position:relative; height:1px; flex:1; overflow:hidden; background:#18282235; }
.tw-scroll-story__progress i { display:block; width:100%; height:100%; background:#215a43; transform:scaleX(0); transform-origin:left center; }
.tw-replay-active { will-change:opacity,translate,scale,clip-path; }
@media (max-width:760px) {
  .tw-scroll-story__track { height:440svh; }
  .tw-scroll-story__stage { min-height:0; }
  .tw-scroll-story__scene { display:block; padding:0; }
  .tw-scroll-story__photo { position:absolute; inset:0; }
  .tw-scroll-story__photo::after { background:linear-gradient(180deg,#18282218 20%,#18282205 42%,#18282270); }
  .tw-scroll-story__cue { position:absolute; inset:auto 16px max(72px,calc(env(safe-area-inset-bottom) + 64px)); max-width:none; padding:20px 20px 22px; background:rgba(248,249,246,.95); }
  .tw-scroll-story__number { margin-bottom:12px; }
  .tw-scroll-story__cue h2 { max-width:18em; font-size:clamp(1.5rem,7vw,2.35rem); line-height:1.45; }
  .tw-scroll-story__detail { margin-top:10px; font-size:.88rem; line-height:1.8; }
  .tw-scroll-story__rail { inset:auto 20px max(24px,env(safe-area-inset-bottom)); gap:10px; color:#fff; text-shadow:0 1px 6px #18282280; }
  .tw-scroll-story__progress { background:#ffffff70; }
  .tw-scroll-story__progress i { background:#fff; }
}
@media (prefers-reduced-motion:reduce) {
  .tw-scroll-story { display:none !important; }
  .tw-replay-active { will-change:auto; }
}

/* Five-stage story: keep titles inside a flexible readable column. */
.tw-scroll-story__cue { min-width:0; overflow:visible; }
.tw-scroll-story__cue h2 { max-width:100%; overflow:visible; white-space:normal; word-break:normal; overflow-wrap:anywhere; line-break:strict; text-wrap:balance; }
/* Example screenshots occupy the wide second grid column; copy stays compact on the first. */
.tw-scroll-story__scene--screen { grid-template-columns:minmax(260px,.82fr) minmax(0,1.35fr); gap:clamp(18px,3.2vw,48px); }
.tw-scroll-story__scene--screen .tw-scroll-story__photo { align-self:center; height:auto; max-height:min(52svh,640px); width:100%; aspect-ratio:1.65; min-width:0; overflow:hidden; border:1px solid #cbd2cc; border-radius:3px; padding-top:34px; box-sizing:border-box; background:#f3f4f0; box-shadow:0 18px 56px #18282218; }
.tw-scroll-story__scene--screen .tw-scroll-story__photo::before { content:""; position:absolute; z-index:2; inset:0 0 auto; height:34px; border-bottom:1px solid #d4d9d3; background-color:#f3f4f0; background-image:radial-gradient(circle,#cb837a 0 3px,transparent 3.5px),radial-gradient(circle,#d4b274 0 3px,transparent 3.5px),radial-gradient(circle,#91aa91 0 3px,transparent 3.5px); background-repeat:no-repeat; background-size:7px 7px; background-position:14px center,29px center,44px center; pointer-events:none; }
.tw-scroll-story__scene--screen .tw-scroll-story__photo::after { display:none; }
.tw-scroll-story__scene--screen .tw-scroll-story__photo img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; object-position:center; scale:1; }
.tw-scroll-story__scene--screen .tw-scroll-story__screen-link { position:absolute; inset:34px 0 0; display:block; outline-offset:3px; }
.tw-scroll-story__scene--screen .tw-scroll-story__cue { width:100%; min-width:0; max-width:none; padding-block:10px; }
.tw-scroll-story__scene--screen .tw-scroll-story__number { margin-bottom:clamp(12px,2vh,20px); }
.tw-scroll-story__scene--screen .tw-scroll-story__cue h2 { max-width:100%; font-size:clamp(1.55rem,2.7vw,2.65rem); line-height:1.42; overflow-wrap:anywhere; }
.tw-scroll-story__scene--screen .tw-scroll-story__detail { max-width:100%; margin-top:1rem; font-size:clamp(.84rem,.95vw,.96rem); line-height:1.8; }
.tw-scroll-story__page-link { display:inline-flex; align-items:center; gap:.3em; margin-top:1.25rem; padding:.5rem 0; color:#215a43; border-bottom:1px solid #215a43; font-size:.92rem; font-weight:600; line-height:1.35; text-decoration:none; text-underline-offset:.22em; }
.tw-scroll-story__page-link:hover { color:#163d2e; border-bottom-width:2px; }
.tw-scroll-story__page-link:focus-visible,.tw-scroll-story__screen-link:focus-visible { outline:3px solid #215a43; outline-offset:4px; }
@media (max-width:920px) and (min-width:761px) {
  .tw-scroll-story__scene--screen { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:12px; padding:30px 28px 84px; }
  .tw-scroll-story__scene--screen .tw-scroll-story__photo { position:relative; inset:auto; grid-column:1; grid-row:1; align-self:center; justify-self:center; width:min(100%,760px); height:auto; max-height:44svh; aspect-ratio:1.85; }
  .tw-scroll-story__scene--screen .tw-scroll-story__cue { grid-column:1; grid-row:2; justify-self:center; width:min(100%,760px); max-width:none; padding:12px 16px; }
  .tw-scroll-story__scene--screen .tw-scroll-story__cue h2 { max-width:100%; font-size:clamp(1.55rem,3.2vw,2.2rem); }
  .tw-scroll-story__scene--screen .tw-scroll-story__screen-link { inset:34px 0 0; }
}
@media (max-width:760px) {
  .tw-scroll-story__scene--screen { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; align-items:stretch; gap:12px; padding:clamp(18px,4vh,30px) 14px max(82px,calc(env(safe-area-inset-bottom) + 68px)); }
  .tw-scroll-story__scene--screen .tw-scroll-story__photo { position:relative; inset:auto; grid-column:1; grid-row:1; align-self:center; justify-self:center; width:min(100%,680px); height:auto; max-height:54svh; aspect-ratio:1.85; }
  .tw-scroll-story__scene--screen .tw-scroll-story__cue { position:relative; inset:auto; grid-column:1; grid-row:2; justify-self:center; width:min(100%,680px); max-width:none; padding:14px 16px; background:rgba(248,249,246,.96); }
  .tw-scroll-story__scene--screen .tw-scroll-story__number { margin-bottom:8px; }
  .tw-scroll-story__scene--screen .tw-scroll-story__cue h2 { max-width:100%; font-size:clamp(1.4rem,6vw,2rem); line-height:1.38; }
  .tw-scroll-story__scene--screen .tw-scroll-story__detail { margin-top:7px; font-size:.82rem; line-height:1.6; }
  .tw-scroll-story__page-link { margin-top:.7rem; padding:.4rem 0; font-size:.86rem; }
}

/* The CTA follows caption legibility; the image link follows the active photo instead. */
.tw-scroll-story__page-link { transition:color .18s ease,border-color .18s ease; }
.tw-scroll-story__page-link[aria-hidden="true"] { pointer-events:none; }