/* Riverstill kit, round 3: the locked pieces, ported from the approved round 8 motion kit. */
@import url("tokens.css");
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px} /* final polish (5e): one ring everywhere, 2 px */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0;line-height:1.08}
p{margin:0}
img,video,canvas,svg{display:block}
.rs-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.rs-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rs-skip{position:fixed;left:12px;top:-80px;z-index:300;padding:12px 18px;background:var(--fg);color:var(--bg);border-radius:999px;font-size:14px;text-decoration:none;transition:top 300ms var(--ease)}
.rs-skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.rs-lk{display:block;overflow:visible}

/* ---------- still water ---------- */
.rs-water{position:relative;overflow:hidden;touch-action:pan-y}
.rs-water>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rs-stage{position:relative;display:grid;place-items:center;overflow:hidden}
.rs-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.rs-stage .rs-lk{position:relative;width:min(80%,520px);z-index:1;color:var(--fg)}

/* ---------- day and night: the horizon ---------- */
.rs-hz{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:7px 12px 7px 8px;border-radius:999px;color:inherit}
.rs-hz svg{width:44px;height:30px;overflow:visible}
.rs-hz .word{position:relative;width:42px;height:20px;overflow:hidden;font-size:14px;letter-spacing:.04em;text-align:left}
.rs-hz .word span{position:absolute;left:0;top:0;transition:transform 700ms var(--ease),opacity 700ms var(--ease)}
.rs-hz .w-night{transform:translateY(100%);opacity:0}
.night .rs-hz .w-day{transform:translateY(-100%);opacity:0}
.night .rs-hz .w-night{transform:none;opacity:1}
.rs-hz .sun{transition:transform 900ms var(--ease),fill-opacity 700ms var(--ease);transform-box:view-box;transform-origin:0 0}
.rs-hz .refl line{transition:transform 900ms var(--ease),opacity 700ms var(--ease);transform-box:fill-box;transform-origin:50% 50%}
.night .rs-hz .sun{transform:translateY(8px);fill-opacity:0}
.night .rs-hz .refl line{transform:scaleX(.35);opacity:.35}
.night .rs-hz .refl line:nth-child(1){transform:scaleX(.55);opacity:.6}
.rs-hz.compact .word{display:none}
.rs-hz.compact{padding:7px}

/* ---------- buttons ---------- */
.rs-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:1px solid rgba(var(--fg-rgb),.5);border-radius:999px;font-size:15px;letter-spacing:.03em;isolation:isolate;text-decoration:none;color:var(--fg);transition:color 450ms var(--ease),transform var(--t-press) var(--ease)}
.rs-btn::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform 520ms var(--ease);z-index:-1}
.rs-btn:hover,.rs-btn:focus-visible{color:var(--bg)}
.rs-btn:hover::before,.rs-btn:focus-visible::before{transform:none}
.rs-btn:active{transform:scale(.985)}
.rs-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:inherit;text-decoration:none;font-size:15px;letter-spacing:.02em;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/100% 1px no-repeat;transition:background-size 520ms var(--ease),opacity 300ms var(--ease)}
.rs-link:hover{background-size:0 1px;background-position:100% calc(100% - 10px)}

/* ---------- service rows A ---------- */
/* round 4: the line's height is reserved and the line is revealed with clip-path and translateY (no layout
   animation). At rest the heading sits in the middle of the row; as the row lights it rises to make room,
   over the same 620 ms EASE the row used to grow by. */
.rs-rows{border-top:1px solid var(--line);--edge:4px;--tl:calc(14px * 1.55 + 6px)}
.rs-row{position:relative;width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto var(--tl);align-items:center;column-gap:16px;padding:12px 14px 12px calc(var(--edge) + 18px);border-bottom:1px solid var(--line);text-align:left;overflow:hidden;isolation:isolate;color:var(--fg);text-decoration:none;transition:color 520ms var(--ease)}
.rs-row::before{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;transition:transform 640ms var(--ease);z-index:-1}
.rs-row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--edge);background:var(--ochre);transform:scaleY(0);transform-origin:50% 0;transition:transform 560ms var(--ease) 60ms}
.rs-row h3{grid-column:1;grid-row:1;font-size:clamp(28px,6vw,40px);line-height:1.05;transform:translateY(calc(var(--tl) / 2));transition:transform 640ms var(--ease)}
.rs-row .tl{grid-column:1;grid-row:2;align-self:start;min-height:0}
.rs-row .tl p{font-size:14px;line-height:1.55;padding-top:6px;opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0);transition:opacity 360ms var(--ease),transform 560ms var(--ease),clip-path 620ms var(--ease)}
.rs-row .ar{grid-row:1/3;grid-column:2;width:18px;height:12px;opacity:0;transform:translateX(-10px);transition:opacity 400ms var(--ease),transform 600ms var(--ease)}
.rs-row.on{color:var(--bg)}
.rs-row.on::before,.rs-row.on::after{transform:none}
.rs-row.on h3{transform:translateX(4px)}
.rs-row.on .tl p{opacity:.78;transform:none;clip-path:inset(0 0 -2px 0);transition-delay:140ms,140ms,0ms}
.rs-row.on .ar{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .rs-rows .rs-row:hover{color:var(--bg)}
  .rs-rows .rs-row:hover::before,.rs-rows .rs-row:hover::after{transform:none}
  .rs-rows .rs-row:hover h3{transform:translateX(4px)}
  .rs-rows .rs-row:hover .tl p{opacity:.78;transform:none;clip-path:inset(0 0 -2px 0);transition-delay:140ms,140ms,0ms}
  .rs-rows .rs-row:hover .ar{opacity:1;transform:none}
}

/* ---------- icons from the logo's ring (round 8, set v2) ---------- */
.ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:inherit;position:relative;flex:none}
.ic svg{width:40px;height:40px;overflow:visible;display:block}
.ic svg .glyph path{stroke-width:2.1}
.ic .ring{transform-box:view-box;transform-origin:20px 20px;transition:transform 1100ms var(--ease)}
.ic:hover .ring,.ic:focus-visible .ring{transform:rotate(90deg)}
.ic .glyph{transition:transform 600ms var(--ease);transform-origin:20px 20px}
.ic.ic-x:hover .glyph{transform:rotate(90deg)}
.ic.ic-n:hover .glyph{transform:translateX(3px)}
.ic.ic-p:hover .glyph{transform:translateX(-3px)}
.count{display:inline-flex;align-items:center;gap:12px}
.count .bar{width:96px;height:1px;background:var(--line);position:relative;overflow:hidden}
.count .bar i{position:absolute;inset:0;background:currentColor;transform-origin:0 50%;transition:transform 700ms var(--ease)}

/* ---------- sound switch A, still water ---------- */
.snd{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:7px 14px 7px 8px;border-radius:999px;color:inherit}
.snd svg{width:44px;height:30px;overflow:visible;display:block}
.snd .word{position:relative;width:74px;height:20px;overflow:hidden;font-size:14px;letter-spacing:.04em;text-align:left}
.snd .word span{position:absolute;left:0;top:0;white-space:nowrap;transition:transform 700ms var(--ease),opacity 700ms var(--ease)}
.snd .w-on{transform:translateY(100%);opacity:0}
.snd.on .w-off{transform:translateY(-100%);opacity:0}
.snd.on .w-on{transform:none;opacity:1}
.snd.compact{padding:7px 8px}
.snd.compact .word{display:none}

/* ---------- overlay card (round 3) ---------- */
.rs-ov{position:fixed;inset:0;z-index:150}
.rs-ov-veil{position:absolute;inset:0;background:var(--veil)}
.rs-ov-card{position:fixed;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.rs-ov-scroll{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:28px 24px 30px;display:grid;gap:16px;align-content:start;flex:1}
.rs-ov-close{position:absolute;top:8px;right:8px;z-index:4;transition:color 400ms var(--ease)}
.rs-ov-close[data-on="light"]{color:#1E0F1A}.rs-ov-close[data-on="dark"]{color:#EADFCB}
.rs-ov-card.full{border-radius:12px}
.rs-ov-card.full.edge{border-radius:0;border:0}
.rs-ov-card.full .rs-ov-close{top:calc(10px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px))}
.rs-ov-card.full .rs-ov-scroll{padding:calc(64px + env(safe-area-inset-top,0px)) 0 calc(48px + env(safe-area-inset-bottom,0px))}
.rs-ov-card h2,.rs-ov-card h3{font-size:40px;padding-right:44px}
.rs-ov-card .line{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--muted)}
.rs-ov-card .imgw{overflow:hidden;border-radius:3px;position:relative}
.rs-ov-card .imgw img,.rs-ov-card .imgw video{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.rs-ov-card p{color:var(--muted);max-width:52ch}
.rs-ov-rule{display:block;width:36px;height:1px;background:var(--ochre);transform-origin:0 50%}

/* ---------- gallery viewer, light box (round 4: the frame morphs; the controls stay at the screen edges) ---------- */
.rs-ph-layer{position:fixed;inset:0;z-index:160;touch-action:none}
.rs-ph-room{position:absolute;inset:0;background:var(--room)}
.rs-ph-img{position:fixed;display:block;transform-origin:0 0;border-radius:1px;will-change:transform,clip-path,opacity;object-fit:cover;margin:0;background:#000}
img.rs-ph-img{background:none}
img.rs-ph-img.contain{object-fit:contain}
.rs-ph-fx{position:fixed;inset:0;pointer-events:none}
.rs-ph-edge,.rs-ph-fill{position:fixed;inset:0;will-change:clip-path}
.rs-ph-edge{background:rgba(var(--fg-rgb),.16)}
.rs-ph-fill{background:linear-gradient(rgba(var(--fg-rgb),.075),rgba(var(--fg-rgb),.075)),var(--room)}
.rs-ph-glow{position:fixed;border-radius:3px;box-shadow:0 0 120px 10px var(--glow);transform-origin:50% 50%;will-change:transform}
.rs-ph-warm{position:fixed;border-radius:3px;background:radial-gradient(ellipse at 50% 50%,rgba(255,240,214,.22),rgba(255,240,214,0) 70%)}
.rs-ph-nav{position:fixed;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom,0px));margin-inline:auto;width:max-content;display:flex;justify-content:center;align-items:center;gap:22px;z-index:3;color:var(--fg)}
.rs-ph-layer.phone .rs-ph-nav{bottom:calc(36px + env(safe-area-inset-bottom,0px))}
.rs-ph-nav.film{gap:14px}
.rs-ph-layer:not(.phone) .rs-ph-prev,.rs-ph-layer:not(.phone) .rs-ph-next{position:fixed;top:50%;margin-top:-22px;z-index:3;color:var(--fg)}
.rs-ph-layer:not(.phone) .rs-ph-prev{left:max(36px,env(safe-area-inset-left,0px))}.rs-ph-layer:not(.phone) .rs-ph-next{right:max(36px,env(safe-area-inset-right,0px))}
.rs-ph-prog{display:block;width:min(46vw,340px);height:1px;background:rgba(var(--fg-rgb),.28);position:relative;overflow:hidden}
.rs-ph-prog i{position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
/* round 7: the scrub bar: a slim 2 px line in a 44 px tall touch area, with a small handle while dragging or hovered */
.rs-ph-prog.scrub{height:44px;background:none;overflow:visible;cursor:pointer;touch-action:none;outline:none}
.rs-ph-prog.scrub::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;border-radius:2px;background:rgba(var(--fg-rgb),.28)}
.rs-ph-prog.scrub i{top:21px;bottom:auto;height:2px;border-radius:2px}
.rs-ph-prog.scrub b{position:absolute;top:16px;left:calc(var(--k,0) * 100%);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--fg);opacity:0;transform:scale(.6);transition:transform 180ms var(--ease-out),opacity 180ms var(--ease-out)}
.rs-ph-prog.scrub.on b,.rs-ph-prog.scrub:focus-visible b{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.rs-ph-prog.scrub:hover b{opacity:1;transform:none}}
.rs-ph-x{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));z-index:3;color:var(--fg)}

/* ---------- the opening, 8A ---------- */
.op{position:relative;background:#1E0F1A;color:#EADFCB}
.op-track{position:relative;height:560vh}
.op-sticky{position:sticky;top:0;height:100vh;height:100svh;height:100dvh;overflow:hidden}
.op-frame{position:absolute;inset:0;overflow:hidden}
.op-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.op-veil{position:absolute;inset:0;background:#1E0F1A;pointer-events:none;opacity:.48}
.op-line{position:absolute;left:0;right:0;top:50%;height:1px;background:#EADFCB;transform:scaleX(0)}
.op-lk{position:absolute;left:50%;top:50%;width:min(76vw,460px);transform:translate(-50%,-50%);color:#EADFCB;pointer-events:none}
.op-lk svg{width:100%;height:auto;overflow:visible;display:block}
.op-head{position:absolute;left:max(22px,env(safe-area-inset-left,0px));right:22px;bottom:calc(64px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;pointer-events:none}
.op-head h1{position:relative;font-size:clamp(44px,9vw,92px);line-height:1;isolation:isolate}
.op-head p{font-size:clamp(15px,1.6vw,19px);color:rgba(234,223,203,.85)}
.op-head .echo{position:absolute;left:-.04em;bottom:.38em;font-family:var(--serif);font-style:italic;font-size:1.9em;white-space:nowrap;color:rgba(234,223,203,.09);pointer-events:none;line-height:1;z-index:-1}
.op-hint{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,223,203,.7);pointer-events:none}
.op-hint i{display:block;width:1px;height:22px;margin:8px auto 0;background:currentColor;transform-origin:50% 0;animation:hintline 2.4s var(--ease) infinite}
@keyframes hintline{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:50% 0}51%{transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
html.op-hold,html.op-hold body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.op-track{height:100vh;height:100svh}}

/* ---------- wave slider B ---------- */
.ws{position:relative;padding:18px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ws .wimg{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--wash)}
.ws .wimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ws svg.wl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#EADFCB}
.ws .hd{position:absolute;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;background:rgba(30,15,26,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(234,223,203,.4);color:#EADFCB;pointer-events:none}
.ws .hd svg{width:26px;height:26px;display:block}
.ws .tag{position:absolute;top:30px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#EADFCB;opacity:.85;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.ws .tag.l{left:12px}.ws .tag.r{right:12px}
.ws:focus-visible{outline:none}
.ws:focus-visible .wimg{outline:2px solid var(--fg);outline-offset:4px}

/* ---------- bracket merge 8B, depth ---------- */
.mz-track{position:relative;height:320vh}
.mz-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center;justify-items:center;gap:18px;overflow:hidden}
.mz-stage{position:relative}
.mz-card{position:absolute;inset:0;border-radius:2px;overflow:hidden;backface-visibility:hidden;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.mz-card img{width:100%;height:100%;object-fit:cover;display:block}
.mz-cap{text-align:center;color:var(--muted);font-size:14px;min-height:1.6em;transition:opacity 600ms var(--ease)}
/* fix round 1 Nov: "Keep scrolling" in the hero cue's type, and a thin line that fills as the three become one; both
   show only while the section holds the page, and go when the finished photograph is in */
.mz-cue{display:grid;justify-items:center;gap:10px;opacity:0;visibility:hidden;transform:translate3d(0,4px,0);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),visibility 0s 400ms;pointer-events:none}
.mz-cue.on{opacity:1;visibility:visible;transform:none;transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out),visibility 0s}
.mz-cue span{font-family:var(--sans);font-weight:400;font-size:clamp(11px,.95vw,13px);line-height:1.2;letter-spacing:.24em;text-transform:uppercase;color:var(--fg);opacity:.85}
.mz-cue.on span{animation:mz-cue-pulse 2.4s ease-in-out infinite}
@keyframes mz-cue-pulse{0%,100%{opacity:.85}50%{opacity:.8}}
.mz-line{display:block;width:72px;height:1px;background:rgba(var(--fg-rgb),.2);overflow:hidden}
.mz-line b{display:block;height:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:699px){.mz-cue span{font-size:clamp(11px,2.9vw,12.5px)}}
/* reduced motion keeps the hold, so the three can fade to the one as the page scrolls; nothing slides or pulses */
@media (prefers-reduced-motion:reduce){.mz-cue,.mz-cue.on{transform:none}.mz-cue.on span{animation:none}}

/* ---------- photo entrance B, open from the horizon ---------- */
.ent-wait{clip-path:inset(49.6% 0% 49.6% 0%)}

/* ---------- headings that write on (round 4: one soft mask moving across the words) ---------- */
.wo{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%,transparent 100%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
.wo.wo-wait{-webkit-mask-position:100% 0;mask-position:100% 0}
.wo.wo-run{transition:-webkit-mask-position var(--wo-d,1600ms) cubic-bezier(.22,1,.36,1) var(--wo-delay,0ms),mask-position var(--wo-d,1600ms) cubic-bezier(.22,1,.36,1) var(--wo-delay,0ms)}
.wo.wo-done{-webkit-mask-image:none;mask-image:none}
/* fix round 1 Nov (Matthew: "words above the map cut off the bottom"): the mask covers the box only, so it cut the tails
   of g, y and commas while a heading wrote on; room underneath, taken back by the margin, so nothing moves */
.wo{padding-bottom:.22em;margin-bottom:-.22em}

/* ---------- echo heading and read on ---------- */
.echo{position:relative;padding:.25em 0;overflow-x:clip;clip-path:inset(-60% 0 -60% 0)}
.echo-back{position:absolute;left:0;top:50%;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:2.3em;line-height:1;color:var(--fg);opacity:.07;transform-origin:0 50%;margin-top:-.5em;pointer-events:none;will-change:transform}
.echo-front{position:relative;will-change:transform}
.readon{font-family:var(--serif);font-size:clamp(30px,5.6vw,64px);line-height:1.12;max-width:20ch;text-wrap:pretty}
.readon .w span{opacity:.55;transition:opacity 260ms linear}
.readon.lit .w span{opacity:1}
.rv{opacity:0;transform:translateY(18px);transition:opacity 1000ms var(--ease-out),transform 1100ms var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ---------- the top bar: hides on the way down, returns on the way up ---------- */

/* ---------- email reflection, just beneath the water ---------- */
.refl-w{position:relative;display:inline-block}
.refl{position:absolute;left:0;top:calc(100% - 9px);pointer-events:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}}

/* ---------- footer: the river getting deeper ---------- */
.deep{position:relative;background:linear-gradient(0deg,rgb(12,5,10) 0,rgb(20,9,17) 260px,rgba(20,9,17,0) 261px),linear-gradient(180deg,#1E0F1A 0%,#1E0F1A 34%,rgb(20,9,17) calc(100% - 260px),rgb(20,9,17) 100%)}
:root[data-theme="light"] .deep{background:linear-gradient(0deg,#1E0F1A 0,#B5C5CB 260px,rgba(181,197,203,0) 261px),linear-gradient(180deg,#EADFCB 0%,#EADFCB 44%,#B5C5CB calc(100% - 260px),#B5C5CB 100%)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .deep{background:linear-gradient(0deg,#1E0F1A 0,#B5C5CB 260px,rgba(181,197,203,0) 261px),linear-gradient(180deg,#EADFCB 0%,#EADFCB 44%,#B5C5CB calc(100% - 260px),#B5C5CB 100%)}}
.deep.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:normal;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.foot{position:relative;overflow:hidden;padding:clamp(72px,12vw,140px) var(--gut,20px) calc(280px + env(safe-area-inset-bottom,0px))}
.foot-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;gap:26px}
.foot-mark{position:absolute;right:max(-30px,-4vw);bottom:-40px;width:clamp(260px,34vw,460px);aspect-ratio:1;z-index:0;color:#EADFCB;pointer-events:none}
.foot-mark svg{width:100%;height:100%;overflow:visible}
.foot .foot-low{color:#EADFCB}

/* Round 6 header (option E): a solid bar in the page colour that settles from tall to slim; transforms only */
:root{--tone-d:90ms;--bar-top:104px;--bar-slim:58px;--bar-h:58px;--bar-k:.6304}
.rs-bar{position:fixed;left:0;right:0;top:0;z-index:100;height:calc(var(--bar-top) + env(safe-area-inset-top,0px));color:var(--fg);pointer-events:none;--bar-d:550ms;--bar-e:cubic-bezier(.22,1,.36,1)}
.rs-bar>.bg{position:absolute;inset:0;background:rgb(var(--bg-rgb));transform-origin:50% 0;transition:background-color 700ms var(--ease);pointer-events:auto}
.rs-bar>.hl{position:absolute;left:0;right:0;top:calc(var(--bar-top) + env(safe-area-inset-top,0px) - 1px);height:1px;background:var(--line);opacity:0}
.rs-bar .in{position:relative;height:var(--bar-top);margin:env(safe-area-inset-top,0px) auto 0;max-width:1440px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(10px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}
@media (min-width:900px){.rs-bar .in{padding:0 36px 0 48px}}
/* round 7b: the header about 13 % larger (the logo 200 to 228 px, less on the narrowest phones so nothing collides) */
.rs-bar{--lk-w:min(228px,calc(100vw - 172px))}
.rs-bar .lk{position:relative;display:block;height:calc(var(--lk-w) * .22844);width:var(--lk-w);transform-origin:0 50%;transition:opacity 400ms var(--ease);pointer-events:auto;color:inherit}
.rs-bar .lk>span{position:absolute;left:0;top:0;width:100%;height:100%;transition:opacity 320ms var(--ease)}
.rs-bar .lk svg{width:100%;height:auto;display:block}
.rs-bar .ic{width:48px;height:48px}.rs-bar .ic svg{width:44px;height:44px}.rs-bar .rs-hz svg{width:48px;height:33px}
.rs-bar .lk-master{opacity:0}
/* round 7b (Matthew, 25 Oct): the full lockup with PROPERTY MEDIA stays when the bar settles (no fold to the name alone) */
.rs-bar .side{display:flex;align-items:center;gap:2px;pointer-events:auto}
/* E2: hides on scrolling down, returns on scrolling up */
.rs-bar{transition:transform 420ms var(--bar-e)}
.rs-bar.away{transform:translate3d(0,-110%,0)}
.rs-bar .rs-hz{padding:7px 4px}
/* the ripple menu icon: two water lines inside the outer ring settle into the close cross while the ring turns */
.ic-menu .glyph path{stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none;transform-box:view-box;transform-origin:20px 20px;transition:transform 420ms var(--bar-e,cubic-bezier(.22,1,.36,1)),opacity 260ms var(--bar-e,cubic-bezier(.22,1,.36,1))}
.ic-menu .ring{transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.ic-menu.open .ring{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.rs-bar .lk>span,.rs-bar,.ic-menu .ring{transition-duration:1ms}}
.rs-bar.over{z-index:160}

picture{display:contents}
/* round 8: the footer line on every page (© 2026 Riverstill Ltd · Privacy · Legal · Don't count my visits): its links and
   the visit-count button read alike, small, underlined on hover with a mouse, each easy to tap */
.foot-legal a,.foot-legal .foot-count{display:inline-block;font:inherit;color:inherit;background:none;border:0;padding:12px 0;margin:-12px 0;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.foot-legal a:hover,.foot-legal .foot-count:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.foot-legal a:focus-visible,.foot-legal .foot-count:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.doc-foot{padding:8px max(20px,env(safe-area-inset-left,0px)) calc(30px + env(safe-area-inset-bottom,0px));text-align:center}
.doc-foot .foot-legal{margin:0 auto;font-size:12px;line-height:1.5;color:var(--muted);max-width:62ch;opacity:.85}
/* round 8b: the build label, preview hosts only (kit/core.js buildLabel) */
.pv-build{position:fixed;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:400;pointer-events:none;font-family:var(--sans);font-weight:500;font-size:10px;line-height:1.2;letter-spacing:.06em;color:#EADFCB;background:rgba(30,15,26,.78);padding:4px 8px;border-radius:999px}
/* final polish (5a): the faint icon behind content (kit/mark.js); the mask's address is relative to this file */
.rs-mark-host{isolation:isolate}
.rs-mark{position:absolute;display:block;z-index:-1;pointer-events:none;opacity:0;background:currentColor;-webkit-mask:url(logo/Riverstill-Icon-Chalk.svg) center/contain no-repeat;mask:url(logo/Riverstill-Icon-Chalk.svg) center/contain no-repeat}
.rs-mark-layer{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.rs-mark-layer .rs-mark{z-index:auto}
/* final polish (5c): selected text takes a soft Ochre tint (stronger at night, where the tint is weak on Blackberry);
   the typing cursor in fields is Ochre at night only (by day Ochre on Chalk would be too faint) */
::selection{background:rgba(180,134,76,.45)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) ::selection{background:rgba(180,134,76,.32)}}
:root[data-theme="light"] ::selection{background:rgba(180,134,76,.32)}
:root[data-theme="dark"] :is(input,textarea){caret-color:#B4864C}
@media not all and (prefers-color-scheme: light){:root:not([data-theme="light"]) :is(input,textarea){caret-color:#B4864C}}
/* final polish (5d): going between the home page and Privacy, Legal or the not-found page crossfades (about 0.35 s)
   instead of flashing. Only this page fade is shortened: the day/night switch keeps its own 0.8 s (kit/tokens.css).
   Reduce Motion: no fade. Browsers without it simply open the page as before. */
@view-transition{navigation:auto;types:rs-page}
:root:active-view-transition-type(rs-page)::view-transition-old(root),:root:active-view-transition-type(rs-page)::view-transition-new(root){animation-duration:350ms;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* final polish (5k): where scrollbars show (Windows, or a Mac set to always show them), the page's own one is thin and
   quiet in the page's colours; cards and panels keep theirs (the colour is inherited, so it stops at body) */
html{scrollbar-width:thin;scrollbar-color:rgba(var(--fg-rgb),.32) rgb(var(--bg-rgb))}
body{scrollbar-color:auto}