/* The three vows are one physical story: paper, book, land. */
.vow-world { overflow: clip; padding: clamp(74px, 8vw, 116px) 0 76px; background: #d8d1bf; color: #252c28; }
.vow-world .vows-heading { margin-bottom: clamp(40px, 5vw, 72px); }
.vow-world-heading .section-title { max-width: none; min-width: 0; }
.vow-world-heading .vow-title-phrase { white-space: nowrap; }
@media (min-width: 761px) {
  .vow-world-heading .section-title em { white-space: nowrap; }
}
.vow-world-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, 1fr); gap: clamp(34px, 4.2vw, 74px); align-items: start; }
.vow-world-visual { position: sticky; top: clamp(20px, 8vh, 82px); z-index: 1; min-width: 0; }
.vow-world-stage { position: relative; height: min(66vw, 72vh, 710px); min-height: 490px; overflow: hidden; isolation: isolate; background: #26322f; box-shadow: 0 28px 65px rgb(27 34 29 / 23%); }
.vow-world-stage::after { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 39% 34%, transparent 38%, rgb(7 14 12 / 23%) 100%); content: ""; }
.vow-world-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .35s ease; }
.vow-world[data-vow-ready="webgl"] .vow-world-canvas { opacity: 1; }
.vow-world[data-vow-ready="webgl"] .vow-world-fallback { opacity: 0; }
.vow-world-fallback { position: absolute; inset: 0; overflow: hidden; transition: opacity .35s ease; background: repeating-linear-gradient(171deg, transparent 0 23px, rgb(0 0 0 / 5%) 24px 25px), #26322f; }
.vw-fallback-light { position: absolute; inset: -30%; background: radial-gradient(ellipse at 34% 19%, rgb(201 176 120 / 25%), transparent 43%); }
.vw-fallback-paper { position: absolute; left: 18%; top: 12%; width: 64%; height: 78%; padding: 15% 12%; transform: rotate(-8deg); background: #d8d1bf; box-shadow: 16px 19px 4px rgb(0 0 0 / 22%), inset -7px 0 16px rgb(76 68 49 / 13%); }
.vw-fallback-circle { display: block; width: 40%; aspect-ratio: 1; margin: auto auto 19%; border: 2px solid #55574c; border-radius: 50%; background: repeating-linear-gradient(165deg, transparent 0 8px, rgb(37 44 40 / 38%) 9px 11px, transparent 12px 17px); }
.vw-fallback-rule { display: block; height: 1px; margin-top: 13%; background: rgb(37 44 40 / 30%); }
.vw-fallback-book, .vw-fallback-land { display: none; position: absolute; }
.vow-world[data-vow-phase="1"] .vw-fallback-paper, .vow-world[data-vow-phase="2"] .vw-fallback-paper { display: none; }
.vow-world[data-vow-phase="1"] .vw-fallback-book { display: flex; left: 17%; top: 28%; width: 66%; height: 44%; transform: rotate(-7deg); box-shadow: 13px 18px 5px rgb(0 0 0 / 25%); }
.vw-fallback-book i { flex: 1; border: 9px solid #c9c0aa; background: repeating-linear-gradient(90deg, transparent 0 11px, #595d55 12px 13px, transparent 14px 22px), #d8d1bf; }
.vw-fallback-book i + i { border-left: 2px solid #756d56; }
.vow-world[data-vow-phase="2"] .vw-fallback-land { display: block; left: 34%; top: 9%; width: 35%; height: 78%; transform: rotate(-8deg); clip-path: polygon(45% 0, 61% 8%, 76% 22%, 89% 40%, 78% 68%, 57% 92%, 42% 100%, 25% 86%, 15% 65%, 9% 41%, 20% 15%); background: #a7aa99; box-shadow: inset 12px 9px 16px rgb(255 255 255 / 17%); }
.vw-fallback-ridge { display: block; width: 12%; height: 83%; margin: 14% auto; transform: rotate(13deg); border-left: 2px solid rgb(48 63 56 / 45%); border-radius: 50%; }
.vw-fallback-marks { position: absolute; top: 37%; right: 22%; color: #333e35; font-size: 22px; writing-mode: vertical-rl; }
.vow-world-stage-top, .vow-world-stage-bottom { position: absolute; right: 22px; left: 22px; z-index: 4; display: flex; justify-content: space-between; gap: 16px; color: #eee8d9; font-size: 14px; line-height: 1.3; letter-spacing: .09em; text-shadow: 0 1px 5px rgb(0 0 0 / 55%); pointer-events: none; }
.vow-world-stage-top { top: 20px; }
.vow-world-stage-bottom { bottom: 19px; }
.vow-world-stage-bottom span:last-child { font-size: 14px; letter-spacing: .13em; }
.vow-world-controls { display: flex; gap: 0; border-bottom: 1px solid rgb(37 44 40 / 43%); }
.vow-world-controls button { flex: 1; min-width: 0; padding: 14px 5px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #545b51; font: 600 14px/1.4 var(--sans); letter-spacing: .035em; cursor: pointer; transition: color .14s ease, border-color .14s ease, background-color .14s ease, transform .14s ease; }
.vow-world-controls button span { margin-right: 8px; color: #71674d; font-variant-numeric: tabular-nums; }
.vow-world-controls button:hover { color: #252c28; background: rgb(255 255 255 / 12%); }
.vow-world-controls button:active { transform: scale(.96); }
.vow-world-controls button.is-current { color: #252c28; border-color: #86704c; }
.vow-world-controls button:focus-visible { outline: 2px solid #252c28; outline-offset: -3px; }
.vow-world-copy { min-width: 0; }
.vow-world-chapter { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 65vh; padding: 42px 0 48px; border-top: 1px solid rgb(37 44 40 / 35%); scroll-margin-top: 15vh; }
.vow-world-chapter:last-child { border-bottom: 1px solid rgb(37 44 40 / 35%); }
.vow-world-chapter .vow-number { margin-bottom: 24px; color: #6c5837; }
.vow-world-chapter .vow-number span { margin-top: 5px; }
.vow-world-chapter h3 { width: 100%; margin: 0 0 25px; font-family: var(--serif); font-size: clamp(29px, 3vw, 43px); line-height: 1.42; letter-spacing: .04em; text-wrap: wrap; }
.vow-world-chapter > p:not(.vow-number):not(.vow-practice):not(.vow-world-caption) { margin: 0 0 25px; font-size: 17px; line-height: 1.95; }
.vow-world-chapter .vow-practice { grid-column: auto; width: 100%; display: grid; grid-template-columns: 85px 1fr; gap: 10px; margin: 0; padding-top: 17px; border-top: 1px solid rgb(37 44 40 / 18%); color: #3b443e; font-size: 16px; }
.vow-world-chapter .vow-practice b { color: #6c5837; }
.vow-world-caption { margin: 17px 0 0; color: #595e54; font-size: 14px; line-height: 1.7; }
.vow-world-close { margin: 46px 0 0 auto; }
@media (max-width: 960px) {
  .vow-world-grid { grid-template-columns: minmax(0, 1.45fr) minmax(270px, 1fr); gap: 27px; }
  .vow-world-stage { height: 59vh; min-height: 410px; }
  .vow-world-chapter { min-height: 67vh; }
}
@media (max-width: 960px) {
  .vow-world { padding-top: 68px; }
  .vow-world .vows-heading { margin-bottom: 31px; }
  .vow-world-grid { display: block; }
  .vow-world-visual { top: 0; width: var(--page-width,100vw); margin-left: calc((100% - var(--page-width,100vw)) / 2); background: #d8d1bf; box-shadow: 0 13px 24px rgb(33 40 35 / 12%); }
  .vow-world-stage { height: min(38vh, 390px); min-height: 260px; }
  .vow-world-stage-top, .vow-world-stage-bottom { right: 14px; left: 14px; font-size: 14px; }
  .vow-world-stage-bottom span:last-child { display: none; }
  .vow-world-controls button { padding: 9px 2px 10px; font-size: 14px; }
  .vow-world-controls button span { margin-right: 3px; }
  .vow-world-chapter { min-height: 48vh; padding: 37px 0 42px; scroll-margin-top: 49vh; }
  .vow-world-chapter h3 { font-size: clamp(29px, 7vw, 36px); margin-bottom: 18px; }
  .vow-world-chapter > p:not(.vow-number):not(.vow-practice):not(.vow-world-caption) { font-size: 16px; line-height: 1.9; }
  .vow-world-caption { font-size: 14px; }
  .vow-world-close { margin-top: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .vow-world *, .vow-world *::before, .vow-world *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .vow-world-controls button:active { transform: none; }
}

.vow-world-transport{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:6px 0;border-bottom:1px solid #252c2828;font-size:14px;color:#5b604f}
.vow-world-play{min-height:44px;padding:8px 14px;border:1px solid #788067;background:transparent;color:#34452f;font:inherit;font-size:14px;cursor:pointer;transition:background-color .14s ease,color .14s ease}.vow-world-play:hover{background:#26372b;color:#efe7d6}.vow-world-play:focus-visible{outline:2px solid #59623f;outline-offset:3px}.vow-world-play[hidden]{display:none}
@media(max-width:700px){.vow-world-stage{height:min(35vh,300px);min-height:245px}.vow-world-transport{padding-inline:14px}.vow-world-chapter{scroll-margin-top:50vh}}

@media (min-width:701px) and (max-width:960px){.vow-world-stage{height:min(38vh,390px)}.vow-world-transport{padding-inline:24px}.vow-world-controls button{min-height:48px}.vow-world-stage-bottom span:last-child{display:block}}