/* The western road: Part Four. Dust-grey ground, ink, and the red that leaves the mountain
   with him. The release is the room's one large moment; everything else stays quiet. The
   paintings are warm silk; the room around them stays the road's cool grey. */

.js-only-flex { display: none; }
.js .js-only-flex { display: flex; }
/* Labels break into even lines (a chapter number never stands alone on the last one). */
main .label { text-wrap: balance; }
/* A control that is resting while its moment plays: it keeps its place for the keyboard. */
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); background: transparent; }
.btn[aria-disabled="true"]:active { transform: none; }

.road-head { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
/* The room's name on one line where it fits in the display face and in the fallback painted before
   it arrives (it broke before its last word); narrower, two lines in both, so the face swapping in
   never moves the page. */
.road-head .room-title { max-width: 12ch; }
@media (min-width: 37.5rem) { .road-head .room-title { max-width: 17ch; } }

/* ------------------------------------------------------------------ the index */
.road-index-grid { align-items: center; }
.road-index .section-title { margin: .8rem 0 1.2rem; max-width: 13ch; }
.index-stack { display: grid; gap: 2.4rem; }   /* the stamp hangs below the card */
.index-card {
  position: relative; padding: 1.2rem 1.4rem 1.6rem; background: #f6f5f1; color: var(--ink);
  border: 1px solid rgba(26,24,16,.18); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 40px -26px rgba(26,24,16,.55);
  background-image: linear-gradient(transparent 2.5rem, rgba(160,24,0,.3) 2.5rem, rgba(160,24,0,.3) calc(2.5rem + 1px), transparent calc(2.5rem + 1px)),
                    repeating-linear-gradient(180deg, transparent 0 1.7rem, rgba(43,74,122,.12) 1.7rem calc(1.7rem + 1px));
  background-position: 0 0, 0 2.6rem;
}
.index-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin: 0 0 1.1rem; }
.index-card-head .label { font-size: .64rem; }
/* On a phone the two head labels stay on one line, above the card's red rule (they broke onto it). */
@media (max-width: 30rem) { .index-card-head .label { font-size: .6rem; letter-spacing: .06em; white-space: nowrap; } }
.index-entry { margin: 0; font-family: var(--f-mono); font-size: .92rem; line-height: 1.7rem; letter-spacing: .01em; color: var(--ink-2); }
.index-stamp {
  position: absolute; right: 1rem; bottom: -.9rem; padding: .25rem .6rem; border: 2px solid var(--red-4); color: var(--red-4);
  background: rgba(246,245,241,.92); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-6deg);
}
/* Wei's gap, noted in his red: the site's words, not the novel's. */
.road-no-reader { max-width: 27rem; margin: 0; padding-left: 1rem; border-left: 2px solid var(--ink-discrepancy); font-size: 1.08rem; line-height: 1.5; color: var(--ink-3); }
.road-dispatch-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-top: clamp(3rem, 7vw, 5rem); }
@media (max-width: 860px) { .road-dispatch-row { grid-template-columns: 1fr; } }
.dispatch-slip { padding: 1.2rem 1.4rem; border-left: 3px solid var(--jade-3); background: rgba(255,255,255,.5); }
.dispatch-text { margin: .6rem 0 0; font-size: var(--step-1); line-height: 1.4; font-style: italic; }
.dispatch-gloss { margin: .35rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--ink-3); }
.road-clouds { font-size: var(--step-1); line-height: 1.4; margin: 0; color: var(--ink-3); }
.road-about { display: block; margin-top: .4rem; color: var(--red-4); font-style: italic; }

/* ------------------------------------------------------------------ the release
   The painted seal face on a canvas (road.js). Until the paintings arrive the stage is bare silk. */
.road-release { position: relative; height: 330vh; background: #f3e5cc; }
.release-sticky { position: sticky; top: 0; height: 100vh; min-height: 34rem; overflow: hidden; isolation: isolate; background: #f5deba; }
.release-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease-ink); }
.release-sticky.is-painted .release-canvas { opacity: 1; }
.release-still { display: block; width: 100%; max-width: 64rem; height: auto; }

.release-copy {
  position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--masthead-h) + 1.2rem); max-width: 22rem;
  padding: 1rem 1.1rem; background: rgba(249,241,227,.84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(90,60,30,.08);
  transition: opacity .8s var(--ease-ink), visibility 0s;
}
.release-copy .section-title { font-size: var(--step-2); margin: .4rem 0 .6rem; }
.release-copy .label { color: #7a5a3e; }
.release-ledge { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-3); }

.release-log {
  position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(1.2rem, 5vh, 3rem); width: min(24rem, 40%);
  list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;
}
.release-log:focus { outline: none; }   /* focus is put here after the release (not a control) */
.log-line { display: grid; gap: .1rem; padding: .55rem .8rem .6rem; background: rgba(24,15,10,.8); color: #f2e8da; border-left: 2px solid rgba(242,232,218,.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.log-who { color: #c4ae92; font-size: .66rem; }
.log-said { font-size: 1.02rem; line-height: 1.35; }
.log-line--stone { border-left-color: var(--red-2); }
.log-line--stone .log-said, .log-line--him .log-said { color: #ffd9b8; }
.log-line--him { border-left-color: var(--red-1); }
.log-line--monk { border-left-color: #d0cec8; }
.js .log-line { display: none; }
.js .log-line.is-shown { display: grid; animation: log-in .7s var(--ease-ink); }
/* Older lines recede by their ink, not by fading the slip: the words stay readable on any part of
   the painting (4.5:1 or better). */
.js .log-line.is-old .log-who { color: #bba78b; }
.js .log-line.is-old .log-said { color: #d6cab7; }
.js .log-line.is-old.log-line--stone .log-said, .js .log-line.is-old.log-line--him .log-said { color: #e6c4a6; }
.js .log-line.is-old { border-left-color: rgba(242,232,218,.2); }
.js .log-line.is-old.log-line--stone, .js .log-line.is-old.log-line--him { border-left-color: rgba(224,48,16,.55); }
.js .log-line.is-gone { display: none; }
@keyframes log-in { from { opacity: 0; transform: translateY(8px); } }

.sutra {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(1.2rem, 5vh, 3rem); transform: translateX(-50%);
  align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center;
  visibility: hidden; opacity: 0; transition: opacity .8s var(--ease-ink), visibility 0s .8s;
}
.release-sticky.is-ready .sutra { visibility: visible; opacity: 1; transition: opacity .8s var(--ease-ink); }
.release-sticky.is-released .sutra { visibility: hidden; opacity: 0; transition: opacity .6s, visibility 0s .6s; }
.sutra-btn {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 3.3rem; padding: .45rem 1.2rem .45rem .55rem; cursor: pointer;
  border: 1px solid rgba(248,208,80,.6); border-radius: 3rem; background: rgba(26,14,8,.84); color: #f6e9cc;
  font-family: var(--f-body); font-size: 1.02rem; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .3s var(--ease-ink), border-color .3s;
}
.sutra-btn:hover { border-color: var(--gold-1); }
.sutra-btn.is-holding { transform: scale(.98); border-color: var(--red-1); }
.sutra-ring { position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(248,208,80,.55); overflow: hidden; flex: none; }
.sutra-ring::after { content: "\5c01"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-brush); color: var(--gold-2); font-size: 1.05rem; }
.sutra-fill { position: absolute; inset: 0; background: conic-gradient(rgba(224,48,16,.6) calc(var(--p, 0) * 1turn), transparent 0); }
.sutra-toggle { background: rgba(249,241,227,.88); }

/* Without JavaScript nothing is painted or scrolled: a still of the seal face, then the account. */
html:not(.js) .road-release { height: auto; }
html:not(.js) .release-sticky { position: relative; height: auto; min-height: 0; display: grid; gap: 1.5rem; padding: 3rem var(--gutter); }
html:not(.js) .release-canvas { display: none; }
html:not(.js) .release-copy, html:not(.js) .release-log { position: static; width: auto; max-width: 36rem; }

/* Where the three overlays go. Wide landscape: the heading top left, the log bottom right, the
   sutra centred at the foot. Narrower landscape (where the centred sutra would run into the log):
   the log rises above the sutra's row. A portrait screen sees a band of the painting from the top
   (road.js sets .is-band and --band-bottom): the log just under the band, the sutra at the foot. */
@media (max-width: 85.3rem) {
  .js .release-sticky:not(.is-band) .release-log { bottom: calc(clamp(1.2rem, 5vh, 3rem) + 4.2rem); }
}
.js .release-sticky.is-band .release-log {
  left: var(--gutter); right: var(--gutter); width: auto; max-width: 36rem; margin-inline: auto;
  top: calc(var(--band-bottom, 62vh) - 1rem); bottom: auto; gap: .35rem;
}
.js .release-sticky.is-band .sutra { bottom: 1rem; width: calc(100% - 2 * var(--gutter)); gap: .6rem; }
/* A phone on its side: the stage fits the screen, the heading gives way once the monk is on the
   road, and the sutra keeps to the right, clear of him. */
@media (max-height: 540px) and (min-aspect-ratio: 21/20) {
  .release-sticky { min-height: 0; }
  .release-copy { max-width: 20rem; padding: .6rem .8rem; top: calc(var(--masthead-h) + .5rem); }
  .release-copy .section-title { font-size: 1.4rem; margin: .2rem 0 0; }
  .release-ledge { display: none; }
  .js .release-sticky.is-underway .release-copy { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
  .js .release-sticky:not(.is-band) .sutra { left: auto; right: var(--gutter); transform: none; justify-content: flex-end; }
  .log-line { padding: .4rem .7rem .45rem; }
  .log-said { font-size: .92rem; }
}
@media (max-width: 760px) {
  .road-release { height: 300vh; }
  /* The heading gives way once the monk is on the road. */
  .release-copy { right: var(--gutter); max-width: none; padding: .7rem .8rem; top: calc(var(--masthead-h) + .6rem); }
  .release-copy .section-title { font-size: 1.5rem; }
  .release-ledge { display: none; }
  .js .release-sticky.is-underway .release-copy { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
  .log-line { padding: .45rem .7rem .5rem; }
  .log-said { font-size: .95rem; }
  .sutra-toggle { font-size: .9rem; }
}

/* ------------------------------------------------------------------ following at a distance */
.road-distance { padding-bottom: 0; }
.distance-head { margin-bottom: clamp(1.5rem, 5vh, 3rem); }
.distance-head .section-title { margin: .8rem 0 1.2rem; max-width: 14ch; }

/* The road west as a handscroll (road.js): the painting travels right to left inside a band as the
   page scrolls, the notes below it one at a time, a hairline between them marking how far west. */
.west { position: relative; height: 340vh; }
.west-stage {
  position: sticky; top: 0; height: 100vh; min-height: 32rem; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: calc(var(--masthead-h) + .4rem) 0 .6rem;
}
.west-view {
  position: relative; flex: 1 1 auto; max-height: 72vh; min-height: 15rem; overflow: hidden; background: #efdcb7;
  box-shadow: inset 0 1px 0 rgba(90,60,30,.18), inset 0 -1px 0 rgba(90,60,30,.18);
}
.west-art { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; opacity: 0; transition: opacity 1.2s var(--ease-ink); }
.west-view.is-painted .west-art { opacity: 1; }
.west-still { display: block; width: 100%; height: auto; }
.west-rule { position: relative; flex: none; height: 1px; margin: 0 var(--gutter); background: rgba(42,40,32,.16); }
.west-rule-bar { position: absolute; inset: 0; background: var(--red-4); transform-origin: 100% 50%; transform: scaleX(0); }
.west-rule-dir { position: absolute; left: 0; top: .55rem; font-size: .6rem; color: var(--muted); }
.west-rule-dir::before { content: "\2190\00a0"; }
.west-notes { position: relative; flex: none; list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 76rem; height: 9.6rem; }
/* One note at a time: the outgoing note is gone before the next one rises, so the two never
   show through each other. */
.west-note {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 1.6rem; max-width: 44rem; margin: 0 auto;
  opacity: 0; transform: translateY(6px); transition: opacity .28s var(--ease-ink), transform .5s var(--ease-ink);
}
.west-note.is-on { opacity: 1; transform: none; transition: opacity .6s var(--ease-ink) .24s, transform .7s var(--ease-ink) .24s; }
.west-note .label { margin: 0; color: var(--accent); }
.west-said { margin: .45rem 0 0; font-size: var(--step-1); line-height: 1.36; color: var(--fg); }
@media (max-width: 760px) {
  .west { height: 320vh; }
  .west-notes { height: 14.2rem; }
  .west-note { top: 1.5rem; }
  .west-said { font-size: 1.08rem; line-height: 1.42; }
}
/* A phone on its side: the stage fits the screen (its notes were below the fold), a lower band. */
@media (max-height: 540px) and (min-aspect-ratio: 21/20) {
  .west-stage { min-height: 0; }
  .west-view { min-height: 0; }
  .west-notes { height: 8.2rem; }
  .west-note { top: 1.15rem; }
  .west-said { font-size: 1rem; line-height: 1.4; margin-top: .3rem; }
}
/* Still: the whole painting, and the notes as a list. */
html:not(.js) .west, html.reduce-motion .west { height: auto; }
html:not(.js) .west-stage, html.reduce-motion .west-stage { position: relative; height: auto; min-height: 0; display: block; padding: 0; overflow: visible; }
html:not(.js) .west-view { display: none; }
html.reduce-motion .west-view { max-height: none; min-height: 0; aspect-ratio: 16 / 9; }
html.reduce-motion .west-art { position: static; display: block; width: 100%; height: auto; transform: none; }
html:not(.js) .west-rule, html.reduce-motion .west-rule { display: none; }
html:not(.js) .west-notes, html.reduce-motion .west-notes {
  height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.4rem 2rem; padding: 1.6rem var(--gutter) 0;
}
html:not(.js) .west-note, html.reduce-motion .west-note { position: static; max-width: none; margin: 0; opacity: 1; transform: none; }
html:not(.js) .west-said, html.reduce-motion .west-said { font-size: 1.08rem; }

/* ------------------------------------------------------------------ the first demon: nine seconds */
.road-first { padding-top: clamp(3.5rem, 10vh, 7rem); padding-bottom: clamp(3.5rem, 10vh, 7rem); }
.road-first .lede { margin-top: .8rem; }
.nine { padding: 1.4rem 1.5rem; background: rgba(255,255,255,.4); border: 1px solid var(--rule); }
.nine-line { margin: .6rem 0 1.4rem; font-size: var(--step-1); line-height: 1.35; max-width: 30ch; }
.nine-bar { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; height: 3.4rem; }
.nine-seg { background: rgba(42,40,32,.1); border-bottom: 2px solid rgba(42,40,32,.3); }
.nine-strike { position: absolute; top: -.6rem; bottom: -.6rem; left: 47.3%; width: 1px; background: var(--red-2); box-shadow: 0 0 0 0 rgba(224,48,16,0); }
.nine-strike.is-flash { animation: strike 1.2s ease-out; }
@keyframes strike { 0% { box-shadow: 0 0 0 0 rgba(224,48,16,.9); width: 3px; } 15% { box-shadow: 0 0 24px 8px rgba(224,48,16,.55); width: 2px; } 100% { box-shadow: 0 0 0 0 rgba(224,48,16,0); width: 1px; } }
.nine-head { position: absolute; top: -.4rem; bottom: -.4rem; left: 0; width: 2px; background: var(--ink-2); opacity: 0; }
.nine-bar.is-playing .nine-head { opacity: 1; }
.nine-seg.is-past { background: rgba(42,40,32,.22); }
.nine-legend { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; margin: .7rem 0 1rem; }
.nine-legend .label { font-size: .6rem; }
.nine-legend .label:last-child { text-align: right; }
.nine-legend-strike { color: var(--red-4); }
.nine-note { font-size: .98rem; color: var(--ink-3); }
.nine .btn-row { align-items: center; gap: 1rem; margin: 1rem 0 0; }
.nine-after { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.nine-after .said-line { margin: 0; font-size: var(--step-1); }
.monk-mark { width: 1.8rem; flex: none; fill: #b8b2a4; }
.nine-after.is-shaking .monk-mark { animation: shake .09s linear 30; }
@keyframes shake { 25% { transform: translate(.6px, -.3px); } 50% { transform: translate(-.5px, .2px); } 75% { transform: translate(.4px, .4px); } }
.js .nine-after { opacity: 0; transition: opacity 1s var(--ease-ink); }
.js .nine-after.is-shown { opacity: 1; }

/* ------------------------------------------------------------------ the river */
.road-river { padding-bottom: 0; }
.road-river .section-title { margin: .8rem 0 1rem; max-width: 16ch; }
/* The painted river (road.js): bare silk until the painting arrives, then the living painting.
   Without JavaScript, the same painting, still. */
.river-stage { position: relative; height: clamp(24rem, 72vh, 44rem); margin-top: 2rem; overflow: hidden; background: #dcd8cc; }
.river-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease-ink); }
.river-stage.is-painted .river-canvas { opacity: 1; }
.river-still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 64%; }
.river-hud {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); margin: 0; white-space: nowrap;
  color: var(--ink-2); text-shadow: 0 0 .7rem rgba(236,232,222,.95), 0 0 .2rem rgba(236,232,222,.95);
}
@media (max-width: 760px) {
  .river-stage { height: min(64vh, 28rem); }
  .river-still { object-position: 58% 60%; }
}
.river-after { padding: 2rem var(--gutter) clamp(3.5rem, 10vh, 7rem); display: grid; gap: 1.4rem; justify-items: start; }
.river-note { max-width: 36rem; margin: 0; font-size: var(--step-1); line-height: 1.45; color: var(--fg-2); }
.river-knows { margin: 0; }
.river-knows blockquote { margin: 0; max-width: 22ch; }
.river-knows figcaption { margin-top: .7rem; }
.js .river-after [data-river-text] { opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease-ink), transform 1.2s var(--ease-ink); }
.js .river-after.is-seen [data-river-text] { opacity: 1; transform: none; }
.js .river-after.is-seen .river-knows { transition-delay: .9s; }

/* ------------------------------------------------------------------ the headband
   The painting as a plate beside Wei's note. A point of light runs once round the circlet
   (road.js) and leaves it a little warmer: the band tightening, without anything moving. */
.headband-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.headband-plate {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #eed9b2; isolation: isolate;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 36px 60px -46px rgba(26,24,16,.75);
}
.headband-plate picture, .headband-plate img { display: block; width: 100%; height: 100%; }
.headband-plate img { object-fit: cover; }
/* A point of light on the gold, drawn out along the band (road.js turns it to the band's tangent). */
.headband-glint {
  position: absolute; left: 25%; top: 70%; width: 8%; height: 2.6%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,253,242,1) 0, rgba(255,236,176,.75) 28%, rgba(255,206,110,.25) 60%, rgba(255,200,100,0) 100%);
}
/* Warmth round the circlet (centre 35.7% 66.3% of the painting) once the light has run round it. */
.headband-warm {
  position: absolute; left: 18.7%; top: 54.3%; width: 34%; height: 24%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,190,96,.3), rgba(255,190,96,.12) 60%, rgba(255,190,96,0));
}
.headband-plate.is-tight .headband-warm { animation: tighten 2.6s var(--ease-ink) forwards; }
@keyframes tighten { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .65; } }
html.reduce-motion .headband-plate.is-tight .headband-warm { animation: none; opacity: .65; }
.headband-text .section-title { margin: .8rem 0 1.2rem; max-width: 14ch; }
.road-headband .said-line { max-width: 28ch; margin: 0; }
.headband-coda { max-width: 30rem; margin: 1.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); font-size: 1.04rem; line-height: 1.5; color: var(--fg-2); }
.headband-coda .label { display: block; margin-bottom: .35rem; }
@media (max-width: 760px) { .headband-grid { grid-template-columns: 1fr; } }