/* Roswall front page 3.0: the Roswall blocks become screens, one at a time.
   html.rsh-on is set before anything is drawn; the screens are the header block, the cases Query Loop and the About group. */
html.rsh-on,html.rsh-on body.rsh-site{height:100%;overflow:hidden;overscroll-behavior:none}
body.rsh-site{--rsh-dark:#121214;--rsh-off:#F9F8F5}

/* ---------- the three screens ---------- */
html.rsh-on .rsh-hero-block,html.rsh-on .rsh-cases,html.rsh-on .rsh-about{position:fixed !important;left:0;right:0;bottom:0;top:var(--rsh-hdr,66px);z-index:1;box-sizing:border-box;width:auto !important;max-width:none !important;margin:0 !important;visibility:hidden;opacity:0;transform:translateY(100%);transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .7s ease .1s,visibility 0s linear .9s}
html.rsh-on .rsh-hero-block.above,html.rsh-on .rsh-cases.above,html.rsh-on .rsh-about.above{transform:translateY(-14vh)}
html.rsh-on .rsh-hero-block.on,html.rsh-on .rsh-cases.on,html.rsh-on .rsh-about.on{visibility:visible;opacity:1;transform:none;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .7s ease .1s,visibility 0s linear 0s}
html.rsh-on.rsh-nt .rsh-hero-block,html.rsh-on.rsh-nt .rsh-cases,html.rsh-on.rsh-nt .rsh-about,html.rsh-on.rsh-nt .rsh-cs{transition:none !important}
html.rsh-on .rsh-hero-block{background:var(--rsh-dark,#121214);padding:0 !important}
html.rsh-on body.rsh-day .rsh-hero-block{background:var(--rsh-off,#F9F8F5)}
/* no fades while the page is being drawn (the boot script lifts this a frame after it has set the colours) */
html.rsh-nt .wp-site-blocks > :first-child,html.rsh-nt .wp-site-blocks > :first-child *,html.rsh-nt .rsh-hero,html.rsh-nt .rsh-hero *{transition:none !important}
html.rsh-on .rsh-hero-block > .rsh.rsh-hero{width:100% !important;margin:0 !important}
html.rsh-on .rsh-cases{background:var(--rsh-off,#F9F8F5);padding:0 !important;overflow:hidden}
html.rsh-on .rsh-about{background:#FFFFFF;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
html.rsh-on .rsh-about.lock{overflow-y:hidden}
/* a demo opened full screen (phones) sits above everything, the site header too */
html.rsd-lock.rsh-on .rsh-cases{z-index:100000}
/* nothing else from the template shows on the front page (it would only peek out behind the screens) */
html.rsh-on .wp-site-blocks > footer,html.rsh-on .wp-site-blocks > .wp-block-template-part:last-child:not(:first-child){display:none}

/* ---------- the site's own header follows the screen: the intro colour, then dark; off-white over the cases; white over About ---------- */
html.rsh-on .wp-site-blocks > :first-child{z-index:5}
html.rsh-on .wp-site-blocks > :first-child:not(.is-position-sticky):not(.is-position-fixed){position:relative}
html.rsh-on .rsh-hdr,html.rsh-on .wp-site-blocks > :first-child.has-background,html.rsh-on .wp-site-blocks > :first-child > .has-background{background-color:var(--rsh-top,var(--rsh-dark,#121214)) !important;transition:background-color .6s ease,color .6s ease}
html.rsh-on body.rsh-v-work .rsh-hdr,html.rsh-on body.rsh-v-work .wp-site-blocks > :first-child.has-background,html.rsh-on body.rsh-v-work .wp-site-blocks > :first-child > .has-background{background-color:var(--rsh-off,#F9F8F5) !important}
html.rsh-on body.rsh-v-about .rsh-hdr,html.rsh-on body.rsh-v-about .wp-site-blocks > :first-child.has-background,html.rsh-on body.rsh-v-about .wp-site-blocks > :first-child > .has-background{background-color:#FFFFFF !important}
body.rsh-site.rsh-v-home.rsh-dark .wp-site-blocks > :first-child,body.rsh-site.rsh-v-home.rsh-dark .wp-site-blocks > :first-child a:not(.wp-block-button__link),body.rsh-site.rsh-v-home.rsh-dark .wp-site-blocks > :first-child .wp-block-site-title,body.rsh-site.rsh-v-home.rsh-dark .wp-site-blocks > :first-child p,body.rsh-site.rsh-v-home.rsh-dark .wp-site-blocks > :first-child .wp-block-navigation-item__content{color:#F2F0EA !important}
body.rsh-site.rsh-v-home.rsh-dark .wp-site-blocks > :first-child .wp-block-button__link{background:#F2F0EA !important;color:#121214 !important}
body.rsh-site.rsh-v-home.rsh-dark .wp-site-blocks > :first-child [style*="border-bottom"]{border-bottom-color:rgba(242,240,234,.18) !important}

/* ===== the cases: the Query Loop's posts, one screen each ===== */
html.rsh-on .rsh-cases,html.rsh-on .rsh-about{font-family:Geist,system-ui,-apple-system,'Segoe UI',sans-serif;color:#121214;-webkit-font-smoothing:antialiased}
.rsh-on .rsh-cases .wp-block-post-template{position:absolute !important;inset:0;margin:0 !important;padding:0 !important;list-style:none;max-width:none !important}
.rsh-on .rsh-cases .wp-block-post-template > li.wp-block-post{position:absolute;inset:0;margin:0 !important;box-sizing:border-box;display:grid;opacity:0;visibility:hidden;transform:translateY(7vh);transition:opacity .45s ease,transform .8s cubic-bezier(.7,0,.2,1),visibility 0s linear .8s;max-width:none !important}
.rsh-on .rsh-cases li.wp-block-post.above{transform:translateY(-7vh)}
.rsh-on .rsh-cases li.wp-block-post.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .2s,transform .9s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s linear 0s}
.rsh-on .rsh-cases .wp-block-post > *{margin:0 !important;min-width:0}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-year{font-weight:300;line-height:1.1;letter-spacing:-.025em;color:#8E8C86;font-variant-numeric:tabular-nums}
.rsh-on .rsh-cases .wp-block-post > .wp-block-post-title{font-family:inherit;font-weight:400;line-height:1.1;letter-spacing:-.025em;color:#121214;text-transform:none}
.rsh-on .rsh-cases .wp-block-post-title a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .45s cubic-bezier(.6,0,.2,1)}
.rsh-on .rsh-cases .wp-block-post-title a:hover,.rsh-on .rsh-cases .wp-block-post-title a:focus-visible{background-size:100% 1px;outline:none}
.rsh-on .rsh-cases .wp-block-post > .wp-block-post-excerpt{line-height:1.5;color:#46454B}
.rsh-on .rsh-cases .wp-block-post-excerpt__excerpt{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.rsh-on .rsh-cases .wp-block-post-excerpt__more-text,.rsh-on .rsh-cases .wp-block-post-excerpt__more-link{display:none}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-co{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7E7C76;line-height:1.3}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-stage{position:relative;background:var(--cc,#D9D6CF);container-type:size}
.rsh-cases .rsh-cs-stage > .rsd{position:absolute !important;margin:0 !important;width:auto !important;max-width:none !important;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rsh-cases .rsh-cs-stage > .rsd .rsd-dev{width:100%}
.rsh-cases .rsh-cs-stage > .rsd-phone .rsd-pf{width:min(100cqw,44cqh)}
.rsh-cases .rsh-cs-stage > .rsd.rsd-on .rsd-pf{width:min(100vw,calc((var(--vh) - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 1.75))}
.rsh-cases .rsh-cs-stage .rsd-note{margin:12px 0 0;color:rgba(18,18,20,.66);align-self:center;text-align:center;justify-content:center}
.rsh-cases .rsh-cs-stage .rsd-note .tn-d,.rsh-cases .rsh-cs-stage .rsd-lab{color:#121214}
.rsh-cases .rsh-cs-stage .rsd-note.rsd-cmp{align-self:stretch}
.rsh-cases .rsh-cs-stage .rsd-redo:hover,.rsh-cases .rsh-cs-stage .rsd-redo:focus-visible{background:rgba(18,18,20,.1)}
.rsh-cases .rsh-cs-img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain}
.rsh-ynav{position:absolute;left:48px;bottom:max(4.5vh,32px);z-index:6;display:flex;gap:8px}
.rsh-ynav .arr{width:44px;height:44px;border-radius:50%;border:1px solid rgba(18,18,20,.25);background:none;color:#121214;font:inherit;font-size:18px;line-height:1;padding:0;cursor:pointer;transition:background-color .2s,border-color .2s}
.rsh-ynav .arr:hover,.rsh-ynav .arr:focus-visible{background:rgba(18,18,20,.06);border-color:rgba(18,18,20,.55);outline:none}
.rsh-on .rsh-cases > :not(.wp-block-post-template):not(.rsh-ynav){display:none}
/* a "web + mobile" case (Learningbank, .rsd-web): a still desktop behind the phone, a bit smaller than a desktop demo.
   The menu and part of the first card show to the left of the phone, the rest runs off the right edge; the phone moves
   a little right to make room. The desktop is measured in phone widths, so it keeps its shape at every size */
.rsh-cases .rsh-cs-stage .rsd-backdrop{display:block;left:-33%;width:163%;top:61%;transform:translateY(-50%)}

@media (min-width:901px){
/* the text column runs out to a gap (--G) before the coloured square. Desktop demos are as big as they can be: 3% from the
   right edge, reaching towards the text but 56px clear of it (--O), and at most 1.25 x the square's height wide (--dw) */
.rsh-on .rsh-cases li.wp-block-post{--pad:max(4.5vh,32px);--S:50vw;--G:clamp(40px,calc(12vw - 70px),140px);--T:min(600px,calc(100vw - var(--S) - 176px - var(--G)));--O:clamp(0px,calc(100vw - var(--S) * .97 - 232px - var(--T)),calc(var(--S) * .25));--dw:min(calc(var(--S) * .94 + var(--O)),125cqh);padding:var(--pad) calc(var(--S) + var(--G)) var(--pad) 48px;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:32px;align-content:stretch}
.rsh-on .rsh-cases .wp-block-post > *{grid-column:2}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-year{grid-column:1;grid-row:1;font-size:clamp(30px,2.9vw,46px)}
.rsh-on .rsh-cases .wp-block-post > .wp-block-post-title{grid-row:1;max-width:var(--T);font-size:clamp(30px,2.9vw,46px)}
.rsh-on .rsh-cases .wp-block-post > .wp-block-post-excerpt{grid-row:2;max-width:var(--T);font-size:clamp(16px,1.2vw,19px);margin-top:20px !important}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-co{grid-row:4;align-self:end;height:44px;display:flex;align-items:center}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-stage{position:absolute;top:0;right:0;bottom:0;width:var(--S);z-index:2;grid-column:auto;grid-row:auto}
.rsh-cases .rsh-tall .rsh-cs-stage > .rsd{inset:2.5% 6% 2.5%}
.rsh-cases .rsh-tall .rsh-cs-stage > .rsd-phone .rsd-pf{width:min(100cqw,45.5cqh)}
.rsh-cases .rsh-tall .rsh-cs-stage > .rsd.rsd-web{left:19%;right:-7%}
.rsh-cases .rsh-wide .rsh-cs-stage > .rsd{top:0;bottom:0;right:3%;left:calc(3% - var(--O))}
.rsh-cases .rsh-wide .rsh-cs-stage > .rsd .rsd-dev{width:var(--dw)}
.rsh-cases .rsh-wide .rsh-cs-stage .rsd-note{align-self:center}
.rsh-cases .rsh-wide .rsh-cs-stage .rsd-note.rsd-cmp{width:var(--dw)}
}
@media (max-width:900px){
.rsh-on .rsh-cases li.wp-block-post{padding:3vh 20px 0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto minmax(0,1fr);row-gap:10px;column-gap:16px}
.rsh-on .rsh-cases .wp-block-post > *{grid-column:1 / 3}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-year{grid-column:1;grid-row:1;font-size:22px}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-co{grid-column:2;grid-row:1;align-self:center}
.rsh-on .rsh-cases .wp-block-post > .wp-block-post-title{grid-row:2;font-size:26px}
.rsh-on .rsh-cases .wp-block-post > .wp-block-post-excerpt{grid-row:3;font-size:16px}
.rsh-on .rsh-cases .wp-block-post-excerpt__excerpt{-webkit-line-clamp:4}
.rsh-on .rsh-cases .wp-block-post > .rsh-cs-stage{grid-row:4;margin:6px -20px 0 !important;min-height:0}
.rsh-cases .rsh-cs-stage > .rsd{inset:14px 20px 10px}
.rsh-cases .rsh-cs-stage > .rsd.rsd-web{left:calc(20px + 6%);right:calc(20px - 6%)}
.rsh-cases .rsh-wide .rsh-cs-stage{align-self:start;height:min(100%,calc(100vw * .62 + 60px))}
.rsh-ynav{display:none}
}
@media (prefers-reduced-motion: reduce){html.rsh-on .rsh-hero-block,html.rsh-on .rsh-cases,html.rsh-on .rsh-about,.rsh-cs{transition-duration:.01s !important;transition-delay:0s !important}}

/* ===== About + How I work: outside the case slider, so it scrolls and takes the height it needs ===== */
.rsh-about{min-width:0;box-sizing:border-box;min-height:100%;display:flex;flex-direction:column;gap:5vh;padding:6vh 48px 0;max-width:none !important;margin:0 !important;border-top:0 !important}
.rsh-about .ab-top{flex:none;display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:40px}
.rsh-about .ab-h{margin:0;font-weight:300;font-size:clamp(30px,3.3vw,52px);line-height:1.12;letter-spacing:-.025em;color:#7E7C76}
.rsh-about .ab-txt{display:flex;flex-direction:column;gap:14px;max-width:52em}
.rsh-about .ab-lead{margin:0;font-size:clamp(20px,1.75vw,28px);line-height:1.3;letter-spacing:-.015em;color:#121214;max-width:34em}
.rsh-about .ab-p{margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:#46454B;max-width:44em}
.rsh-about .ab-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:15px}
.rsh-about .ab-links a{color:#121214;text-decoration:none;border-bottom:1px solid rgba(18,18,20,.25);padding-bottom:1px}
.rsh-about .ab-links a:hover{border-bottom-color:#121214}
.rsh-about .ab-how{flex:none;display:flex;flex-direction:column;gap:14px}
.rsh-about .ab-k{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#8E8C86}
.rsh-about .ab-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(270px,25vw,430px);gap:0;margin:0 -48px}
.rsh-about .hw{position:relative;display:block;min-height:0;margin:0;padding:0;border-radius:0;overflow:hidden;text-align:left;-webkit-tap-highlight-color:transparent;container-type:size}
.rsh-about .hw0{background:#ECEAE4;color:#121214}
.rsh-about .hw1{background:#121214;color:#F2F0EA}
.rsh-about .hw2{background:#C9C6BE;color:#121214}
.rsh-about .hw-t{position:absolute;left:clamp(18px,7cqw,34px);right:clamp(18px,7cqw,34px);top:clamp(16px,6.5cqw,30px);margin:0;font-size:clamp(22px,min(8.2cqw,10cqh),36px);line-height:1.08;letter-spacing:-.02em;font-weight:400;z-index:2}
.rsh-about .hw-t em{font-family:'Literata',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.01em;display:inline-block}
.rsh-about .hw-art{position:absolute;left:8%;right:8%;top:27%;bottom:6%;width:84%;height:67%;overflow:hidden;opacity:.9}
.rsh-about .hw-art *{transform-box:fill-box;transform-origin:center}

/* the animations: paused or off at rest, running while you hover (or after a tap) */
.rsh-about .hw-art.a0 path{stroke-dasharray:none}
.rsh-about .hw-art.a0 .pt{fill:currentColor;stroke:none}
.rsh-about .hw-art.a1 .rg{transform-box:view-box;transform-origin:100px 110px;animation:hwSpin var(--t) linear infinite paused}
.rsh-about .hw-art.a1 .rg.rev{animation-direction:reverse}
.rsh-about .hw-art.a3 .wv{animation:hwFlow var(--t) linear infinite paused}
.rsh-about .hw-art.a2 .col{transform-origin:50% 100%}
.rsh-about .hw-art.a4 .set{transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.rsh-about .hw-art.a5 .hd{transition:opacity .3s}
.rsh-about .hw-on .a0 path{stroke-dasharray:.3 .7;animation:hwRush .9s linear var(--d) infinite}
.rsh-about .hw-on .a0 .pt{animation:hwPulse 1.1s ease-in-out infinite}
.rsh-about .hw-on .a1 .rg{animation-play-state:running}
.rsh-about .hw-on .a2 .col{animation:hwBuild .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms) both}
.rsh-about .hw-on .a3 .wv{animation-play-state:running}
.rsh-about .hw-on .a4 .set.l{transform:translateX(9%)}
.rsh-about .hw-on .a4 .set.r{transform:translateX(-9%)}
.rsh-about .hw-on .a4 circle{animation:hwBreathe 2.4s ease-in-out calc(var(--i) * 120ms) infinite}
.rsh-about .hw-on .a5 path:not(.ar):not(.hd){stroke-dasharray:1;animation:hwDraw .7s cubic-bezier(.3,.6,.2,1) calc(var(--i) * 22ms) both}
.rsh-about .hw-on .a5 .ar{stroke-dasharray:1;animation:hwDraw .45s cubic-bezier(.3,.6,.2,1) .62s both}
.rsh-about .hw-on .a5 .hd{animation:hwHead .3s ease-out 1s both}
@media (hover:hover){
.rsh-about .hw:hover .a0 path{stroke-dasharray:.3 .7;animation:hwRush .9s linear var(--d) infinite}
.rsh-about .hw:hover .a0 .pt{animation:hwPulse 1.1s ease-in-out infinite}
.rsh-about .hw:hover .a1 .rg{animation-play-state:running}
.rsh-about .hw:hover .a2 .col{animation:hwBuild .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms) both}
.rsh-about .hw:hover .a3 .wv{animation-play-state:running}
.rsh-about .hw:hover .a4 .set.l{transform:translateX(9%)}
.rsh-about .hw:hover .a4 .set.r{transform:translateX(-9%)}
.rsh-about .hw:hover .a4 circle{animation:hwBreathe 2.4s ease-in-out calc(var(--i) * 120ms) infinite}
.rsh-about .hw:hover .a5 path:not(.ar):not(.hd){stroke-dasharray:1;animation:hwDraw .7s cubic-bezier(.3,.6,.2,1) calc(var(--i) * 22ms) both}
.rsh-about .hw:hover .a5 .ar{stroke-dasharray:1;animation:hwDraw .45s cubic-bezier(.3,.6,.2,1) .62s both}
.rsh-about .hw:hover .a5 .hd{animation:hwHead .3s ease-out 1s both}
}
@keyframes hwRush{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}
@keyframes hwSpin{to{transform:rotate(360deg)}}
@keyframes hwBuild{0%{transform:scaleY(.08)}100%{transform:scaleY(1)}}
@keyframes hwFlow{to{transform:translateX(120px)}}
@keyframes hwBreathe{0%,100%{transform:scale(1)}45%{transform:scale(1.07)}}
@keyframes hwDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hwHead{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

@media (max-width:900px){
.rsh-about{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(330px,1fr);padding:3vh 20px 0;gap:18px}
.rsh-about .ab-top{grid-template-columns:minmax(0,1fr);row-gap:8px}
.rsh-about .ab-h{font-size:22px}.rsh-about .ab-lead{font-size:19px}.rsh-about .ab-p{display:none}
.rsh-about .ab-how{min-height:0}
.rsh-about .ab-cards{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0;gap:0;margin:0 -20px;padding:0;scrollbar-width:none}
.rsh-about .ab-cards::-webkit-scrollbar{display:none}
.rsh-about .hw{flex:0 0 72vw;scroll-snap-align:start}
.rsh-about .hw-t{font-size:clamp(20px,11.5cqw,34px);left:8.5cqw;right:8.5cqw;top:8cqw}
.rsh-about .hw-art{left:6%;right:6%;top:auto;bottom:13%;width:88%;height:auto;max-height:58%}
}
@media (prefers-reduced-motion: reduce){.rsh-about .hw-art *{animation:none !important;transition:none !important}}

.rsh-about > *,.rsh-about .ab-top > *,.rsh-about .ab-txt > *,.rsh-about .ab-how > *{margin-block:0 !important}
.rsh-about h2,.rsh-about h3,.rsh-about p{text-transform:none}
.rsh-about .ab-h{font-family:inherit;font-weight:300}
.rsh-about .ab-links a{color:#121214;text-decoration:none}
.rsh-about .hw-t{color:inherit;font-family:inherit}
.rsh-about .ab-cards{max-width:none}
html.rsh-on .rsh-about{min-height:0 !important}