/* The story and chapter IV share exactly the same page width. */
.river-page .folio{max-width:1440px;--manuscript-bleed:-2.3%}
.river-page .river-journey,.river-page .shared-table{margin-inline:var(--manuscript-bleed)}
.river-journey{margin-block:0}
.story-canvas{position:relative;isolation:isolate;container-type:inline-size}
.story-art{display:block;pointer-events:none}
.story-art img{display:block;width:100%;height:auto;max-width:none;mix-blend-mode:multiply}

/* The painting establishes the height. Text occupies its open riverbanks. */
.story-header{position:absolute;inset:0 0 auto;height:27%}
.story-logo{position:absolute;top:7%;left:50%;width:9.5%;transform:translateX(-50%)}
.story-logo img{display:block;width:100%;height:auto}
.story-nav{position:absolute;top:19%;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;text-align:center;font:clamp(.875rem,1.4cqw,1.125rem)/1.4 var(--sans)}
.story-nav-left{left:17%}.story-nav-right{right:16%}
.story-nav .roman{font-size:clamp(1.5rem,2.4cqw,2rem)}
.story-nav:hover{color:var(--rust)}
.story-label{font:400 clamp(.875rem,1.18cqw,1rem)/1.5 var(--sans);color:var(--olive);letter-spacing:.065em;text-transform:uppercase;margin:0 0 1.5cqw}
.story-opening-label{position:absolute;top:38%;left:17%;right:17%;max-width:none;text-align:center}
.story-header h1{position:absolute;top:45%;left:13%;right:10%;margin:0;font:400 clamp(2rem,4.2cqw,4.5rem)/1.08 var(--serif);letter-spacing:-.04em;text-align:center}
.story-intro{position:absolute;top:73%;left:14%;width:34%;text-align:center}
.story-intro>p{font:clamp(1rem,1.55cqw,1.25rem)/1.65 var(--serif);margin:0 0 1.7cqw}
.story-intro .order-cta{font-size:clamp(1rem,1.7cqw,1.3rem)}
.story-chapter{position:absolute;left:7.5%;width:30%;scroll-margin-top:30px}
.story-chapter h2{font:400 clamp(1.75rem,3.45cqw,3.75rem)/1.08 var(--serif);letter-spacing:-.03em;margin:0 0 1.8cqw}
.story-chapter>p:not(.story-label){font:clamp(1rem,1.7cqw,1.25rem)/1.65 var(--serif);color:#3c5549;margin:0}
#spring.story-chapter{top:27%}
#village.story-chapter{top:49%;left:67%;width:27%}
#garden.story-chapter{top:77%;width:29%}
.story-mobile-copy{display:none}
.river-caption{margin:20px auto 52px;padding-inline:12px;text-align:center;color:var(--olive);font:italic .875rem/1.7 var(--serif)}
.river-page .meaning{margin-top:15px}

/* Phones use the complete portrait composition, with its sun and river intact.
   Shorter passages keep the journey readable at normal text sizes. */
@media(max-width:760px){
 .river-page .folio{--manuscript-bleed:0%}
 .story-header{height:16.6%}
 .story-logo{top:4%;width:18%;max-width:70px}
 .story-nav{top:15%;gap:4px;width:26%;font-size:.8125rem;line-height:1.35}
 .story-nav-left{left:3%}.story-nav-right{right:3%}
 .story-nav .roman{font-size:1.3rem;line-height:1.1}
 .story-opening-label{display:none}
 .story-header h1{top:46%;left:3%;right:3%;font-size:clamp(1.375rem,6.2cqw,2.3rem);line-height:1.08}
 .story-intro{top:90%;left:18%;width:64%}
 .story-intro>p{display:none}
 .story-intro .order-cta{font-size:1rem;--order-height:44px;--order-cap:31.1127px}
 .story-chapter{left:3%;width:37%;scroll-margin-top:20px}
 .story-label{font-size:.875rem;line-height:1.45;letter-spacing:0;margin-bottom:10px}
 .story-chapter h2{font-size:clamp(1.375rem,6.2cqw,2.3rem);line-height:1.1;margin-bottom:12px}
 .story-chapter>p:not(.story-label){font-size:1rem;line-height:1.55}
 #spring.story-chapter{top:21%}
 #village.story-chapter{top:53%;left:65%;width:32%}
 #garden.story-chapter{top:77%;width:37%}
 .story-desktop-copy{display:none}
 .story-mobile-copy{display:block}
 .river-caption{font-size:.8125rem;max-width:32ch;margin:18px auto 35px}
}

/* The taller header grows with its copy. The painting overlaps its lower sky
   while keeping the river and all three chapter positions together. */
.story-header{position:relative;inset:auto;height:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;row-gap:clamp(20px,2.8cqw,40px);padding:3.4cqw 7% clamp(36px,4.5cqw,64px)}
.story-header .story-logo{position:static;grid-column:2;grid-row:1;width:9.5cqw;transform:none}
.story-header .story-nav{position:static;grid-row:1;justify-self:center;width:auto;flex-direction:row;align-items:center;justify-content:center;white-space:nowrap}
.story-nav-content{display:inline-flex;align-items:baseline;gap:.55em;line-height:1.2;padding-bottom:2.2px;border-bottom:2px solid var(--rust)}
.story-header .story-nav .roman{font-size:1em;line-height:inherit;color:var(--rust);border:0;padding:0}
.story-header .story-nav .roman::after{content:'·';margin-left:.55em;opacity:.65}
.story-header .story-nav-left{grid-column:1}
.story-header .story-nav-right{grid-column:3}
.story-header .story-opening-label{position:static;grid-column:1/-1;grid-row:2;margin:0;text-align:center}
.story-header h1{position:static;grid-column:1/-1;grid-row:3;margin:0}
.story-header .story-intro{position:static;grid-column:1/-1;grid-row:4;justify-self:center;width:100%;max-width:46rem;text-align:center}
.story-header .story-intro>p{display:block;max-width:none;margin:0 0 clamp(22px,2cqw,30px)}
.story-painting{position:relative;margin-top:-38cqw}
@media(max-width:760px){
 .story-header{padding:16px 5% 38px;row-gap:24px}
 .story-header .story-logo{width:18cqw;max-width:70px}
 .story-header .story-nav{width:100%}
 .story-header h1{grid-row:2}
 .story-header .story-intro{grid-row:3;max-width:28rem}
 .story-header .story-intro>p{font-size:1rem;line-height:1.55;margin-bottom:24px}
 .story-painting{margin-top:-34cqw}
}
@media(max-width:480px){
 .story-header{grid-template-columns:1fr 1fr}
 .story-header .story-logo{grid-column:1/-1;justify-self:center}
 .story-header .story-nav{grid-row:2;width:auto;font-size:.875rem}
 .story-header .story-nav-left{grid-column:1}
 .story-header .story-nav-right{grid-column:2}
 .story-header h1{grid-row:3}
 .story-header .story-intro{grid-row:4}
}

/* A single continuous outline keeps the cartouche joins smooth at every size. */
.river-page .order-cta{--order-height:60px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:var(--order-height);max-width:100%;padding:14px 40px;border:0;color:var(--brand-orange);background:transparent;font:italic 700 1.25rem/1.3 var(--serif);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:#b1512720}
.river-page .order-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.river-page .order-outline{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.river-page .order-jewels{fill:currentColor}
.river-page .order-label,.river-page .order-arrow{position:relative}
.river-page .order-arrow{font-style:normal;font-size:1.2em;line-height:1;transition:transform .16s ease}
.river-page .order-cta:hover{color:var(--ink)}
.river-page .order-cta:hover .order-arrow{transform:translateX(3px)}
.river-page .order-cta:active .order-arrow{transform:translateX(1px)}
.river-page .order-cta:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.river-page .story-intro{display:flex;flex-direction:column;align-items:center}
.river-page .story-intro .order-cta{flex:none;font-size:clamp(1.125rem,1.8cqw,1.4rem)}
@media(max-width:760px){
 .river-page .order-cta{--order-height:56px;font-size:1.125rem;padding-inline:34px}
 .river-page .story-intro .order-cta{--order-height:56px;font-size:1.125rem}
}
@media(max-width:380px){
 .river-page .order-cta,.river-page .story-intro .order-cta{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
 .river-page .order-arrow{transition:none}
 .river-page .order-cta:hover .order-arrow,.river-page .order-cta:active .order-arrow{transform:none}
}