/* Urban Beaches: a city burning under the sun, then protected. Only loaded on this case. */
html{scroll-padding-top:0}
body[data-project=isdin]{
 --hot:#d93a1d;--hot2:#d93a1d;--clay-text:#a8431c;--sand:#f4e4c8;--sand2:#e9d0a6;--clay:#c6552a;--brolly:#ef7d2b;--cream:#fff8ec;
 --pool:#19b3c6;--pool2:#0b8199;--night:#101c28;--ink:#16202b;--g:clamp(16px,3vw,48px);
 background:var(--sand);color:var(--ink);overflow-x:clip;
}
body[data-project=isdin] .site-header{position:absolute;inset:0 0 auto;z-index:30;background:transparent;color:#fff}
body[data-project=isdin] .skip{z-index:40}
body[data-project=isdin] .site-header a,body[data-project=isdin] .site-header sup{color:inherit}
body[data-project=isdin] .site-header .wordmark span{color:inherit}
body[data-project=isdin] .site-header [aria-current=page]{border-color:currentColor}
.ub{display:block;font-family:'DM Sans',Arial,sans-serif}
.ub figure{margin:0}
.ub img{display:block;max-width:none}
.ub a{color:inherit}
.ub section{position:relative}

/* Chapter heads: the board's bold caps with a full stop. */
.ub-h{font:700 clamp(3.4rem,11vw,12rem)/.86 'DM Sans',Arial,sans-serif;letter-spacing:-.045em;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 1.2rem}
.ub-lead{font:400 clamp(1.3rem,3vw,3.1rem)/1.16 'DM Sans',Arial,sans-serif;letter-spacing:-.022em;margin:0;max-width:24em}
.ub-lead strong{font-weight:700}

/* ---------- Opening ---------- static by default, pinned with .ub-js */
.ub-pin{background:var(--hot2);color:#fff;padding:calc(76px + 1rem) var(--g) 0;display:flex;flex-direction:column;gap:1.5rem}
.ub-top{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem}
.ub-top a{text-decoration:none}
.ub-title{font:700 clamp(5.4rem,23.5vw,27rem)/.8 'DM Sans',Arial,sans-serif;letter-spacing:-.065em;margin:.4rem 0 0 -.03em;color:#fff}
.ub-title span{display:block}
.ub-intro{display:grid;gap:.5rem 2rem;grid-template-columns:minmax(0,1fr) auto;max-width:44rem;align-items:end}
.ub-intro .case-category{grid-column:1/-1;font-size:.9375rem;font-weight:700}
.ub-intro p{margin:0;font:500 clamp(1.05rem,1.45vw,1.4rem)/1.28 'DM Sans',Arial,sans-serif;letter-spacing:-.012em}
.ub-intro .case-watch{white-space:nowrap;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding:.35rem 0;min-height:44px;display:inline-flex;align-items:center;gap:.5rem}
.ub .ub-map{position:relative;margin:0 calc(var(--g)*-1);overflow:hidden}
.ub-map img{width:100%;height:auto}
.ub-sun,.ub-rub,.ub-rub__donecopy{display:none}
.ub-caption{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem;padding:.9rem 0;order:9}

html.ub-js .ub-stage{height:300svh}
/* First-screen geometry lives here; the script reads it back. The corner logo starts just out of frame, above the crop. */
html.ub-js .ub-pin{
 --ws:max(216.9svh,100vw);--hs:calc(var(--ws)/1.9523);
 --tx:clamp(100vw - var(--ws),44vw - var(--ws)*.4983,0px);
 --ty:clamp(100svh - var(--hs),46svh - var(--hs)*.4623,var(--hs)*-.1);
 --col:clamp(14.5rem,24.5vw,26rem);--capH:3.1rem;
 --fs:min(calc((100vw - var(--g)*2 - var(--col) - 24px)/6.95),calc(30svh - 72px));
 position:sticky;top:0;height:100svh;padding:0;display:block;overflow:hidden;background:var(--hot2);touch-action:pan-y pinch-zoom;
}
html.ub-js .ub .ub-map{position:absolute;left:0;top:0;margin:0;width:var(--ws);transform-origin:0 0;transform:translate(var(--tx),var(--ty));z-index:1;background:var(--hot2)}
html.ub-js .ub-map canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ub-map canvas{display:none}
html.ub-js .ub-top{position:absolute;z-index:6;left:var(--g);top:88px;display:inline-flex;align-items:center;gap:1.1rem;text-shadow:0 0 .7em #3c1208,0 1px 2px #3c1208b3;transition:opacity .3s}
html.ub-js .ub-top a{display:inline-flex;align-items:center;min-height:24px}
html.ub-js .ub-title{position:absolute;z-index:5;inset:0;margin:0;pointer-events:none;font-size:var(--fs)}
html.ub-js .ub-title span{position:absolute;left:calc(var(--g) - .03em);bottom:var(--capH);transform-origin:0 0;white-space:nowrap}
html.ub-js .ub-title span:last-child{left:calc(var(--g) + 2.82em)}
html.ub-js .ub-intro{position:absolute;z-index:6;right:var(--g);bottom:calc(var(--capH) + var(--rubH,6.9rem));width:var(--col);grid-template-columns:minmax(0,1fr);background:var(--hot2);padding:1rem 1.1rem .6rem}
html.ub-js .ub-intro .case-watch{justify-self:start}
html.ub-js .ub-intro:focus-within{opacity:1!important;pointer-events:auto!important}
html.ub-js .ub-caption{position:absolute;z-index:6;left:var(--g);right:var(--g);bottom:0}
html.ub-js .ub-caption span:last-child{white-space:nowrap}
/* The one sun. It keeps its own coordinates through the page; the script moves it between stacking levels. */
html.ub-js .ub-sun{display:block;position:fixed;left:0;top:0;z-index:4;width:640px;height:640px;will-change:transform;pointer-events:none;visibility:hidden}
html.ub-js .ub-sun.is-up{visibility:visible}
.ub-sun i{--glow:1;display:block;position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle closest-side,#fffdee 38%,#ffe9a0 68%,#ffb248);scale:.6;transition:scale 1.4s cubic-bezier(.2,.7,.2,1)}
.ub-sun i::after{content:"";position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(closest-side,transparent 58%,#ffb35c8c 60%,#ff8a3d33 76%,transparent 100%);opacity:var(--glow);transition:opacity 1s}
.ub-sun.is-up i{scale:1}
.ub-sun.is-calm i::after{opacity:calc(var(--glow)*.35)}
/* Hidden and unfocusable until the sun has actually started burning. */
html.ub-js .ub-rub{display:flex;flex-direction:column;align-items:stretch;gap:.55rem;position:absolute;z-index:7;right:var(--g);bottom:var(--capH);width:var(--col);min-height:6.9rem;justify-content:center;background:var(--cream);color:var(--ink);padding:.7rem 1.1rem .8rem;visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s}
.ub-rub p{margin:0;font-size:.9375rem;font-weight:700;line-height:1.2;text-wrap:balance}
.ub-rub__btn{font:700 .9375rem 'DM Sans',Arial,sans-serif;min-height:44px;padding:0 1.05rem;border:0;background:var(--hot2);color:#fff;cursor:pointer}
.ub-rub__btn:hover{background:#bb2f15}
.ub-rub__btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ub-rub__done:empty{display:none}
.ub-rub__done:focus{outline:none}
html.ub-js .ub-stage.is-burning .ub-rub,html.ub-js .ub-stage.is-safe .ub-rub{visibility:visible;opacity:1;transition:opacity .4s,visibility 0s}
html.ub-js .ub-stage.is-safe .ub-rub__hint,html.ub-js .ub-stage.is-safe .ub-rub__btn{display:none}
html.ub-js .ub-stage.is-safe .ub-rub{min-height:var(--rubH,6.9rem);padding:1rem 1.1rem}
html.ub-js .ub-stage.is-safe .ub-rub__done{font-size:1.125rem}
/* Scrims: dark behind the header, the band's own colour under the title so the picture melts into it. */
html.ub-js .ub-pin::before,html.ub-js .ub-pin::after{content:"";position:absolute;z-index:3;left:0;right:0;pointer-events:none;transition:opacity .3s}
html.ub-js .ub-pin::before{top:0;height:170px;background:linear-gradient(#3c1208b3,#3c120880 62%,#3c120800)}
html.ub-js .ub-pin::after{bottom:0;height:calc(var(--fs)*.8 + var(--capH) + 3.5rem);background:linear-gradient(#d93a1d00,#d93a1dd9 46%,#d93a1d);opacity:var(--scrim,1);transition:none}
html.ub-js .ub-stage.is-band .ub-pin::before{opacity:0}
html.ub-js .ub-stage.is-band .ub-rub,html.ub-js .ub-stage.is-band .ub-top{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s,visibility 0s .25s}
html.ub-js .ub-top:focus-within{opacity:1!important;visibility:visible!important}
.ub-top a:focus-visible,.ub-intro a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ub-finger{position:fixed;left:0;top:0;z-index:40;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid #fff;background:#fff3;pointer-events:none;opacity:0;transition:opacity .25s}
.ub-finger.is-on{opacity:1}

/* Very wide windows: the title stacks in the column beside the plaza. */
@media(min-aspect-ratio:13/6){
 html.ub-js .ub-pin{--fs:min(7.1vw,calc(20svh));--tx:clamp(100vw - var(--ws),56vw - var(--ws)*.4983,0px)}
 html.ub-js .ub-title span:first-child{bottom:calc(var(--capH) + .82em)}
 html.ub-js .ub-title span:last-child{left:calc(var(--g) - .03em)}
 html.ub-js .ub-pin::after{opacity:0}
 html.ub-js .ub-pin::before{height:190px}
 html.ub-js .ub-title{text-shadow:0 0 .35em #5c1006}
}

/* ---------- Reto ---------- */
.ub-reto{padding:clamp(5rem,12vw,12rem) var(--g);display:grid;gap:clamp(1.5rem,3vw,3rem);overflow:hidden}
.ub-reto .ub-h{color:var(--clay)}
/* CHALLENGE. is twice as long as RETO.: sized so it clears the parasol at every width. */
html[lang=en] .ub-reto .ub-h{font-size:clamp(2rem,10.2vw,12rem)}
.ub-reto .ub-lead{max-width:min(24em,68vw)}
.ub-parasol,.ub-um{background:radial-gradient(circle,#fff 0 3.5%,transparent 4%),repeating-conic-gradient(var(--brolly) 0 22.5deg,var(--cream) 0 45deg);border-radius:50%}
.ub-reto .ub-h,.ub-reto .ub-lead,.ub-ejec .ub-h,.ub-ejec .ub-lead,.ub-swap{position:relative;z-index:2}
.ub-parasol{z-index:2;position:absolute;width:clamp(11rem,44vw,48rem);aspect-ratio:1;right:calc(clamp(11rem,44vw,48rem)*-.42);top:clamp(2rem,6vw,6rem);box-shadow:2.4vw 3vw 0 #c8a36f66}

/* ---------- Tensión ---------- */
.ub-tension{background:var(--hot2);color:#fff}
.ub-pin2{padding:clamp(4rem,8vw,7rem) var(--g)}
.ub-tension .ub-pin2{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.ub-beach{order:2;display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,.7vw,10px);width:min(100%,78svh);aspect-ratio:1;margin-left:auto}
.ub-beach i{display:block;border-radius:50%;background:#ffffff26;scale:.34}
.ub-beach .ub-um{scale:1;background:radial-gradient(circle,#fff 0 6%,transparent 7%),repeating-conic-gradient(var(--brolly) 0 45deg,var(--cream) 0 90deg);box-shadow:.25vw .3vw 0 #7a1c0a88}
.ub-stat{font:400 clamp(1.3rem,2.6vw,2.7rem)/1.14 'DM Sans',Arial,sans-serif;letter-spacing:-.022em;margin:clamp(1rem,2vw,2rem) 0 0}
.ub-60{display:block;font-size:min(clamp(7rem,19vw,21rem),30svh);line-height:.8;letter-spacing:-.075em;margin:.06em 0 .12em -.03em}
.ub-tension .ub-h{font-size:clamp(1.5rem,2.6vw,2.7rem);letter-spacing:-.02em}

/* ---------- Idea ---------- */
.ub-idea{background:var(--pool);color:var(--ink);overflow:clip}
.ub-idea::before{content:"";position:absolute;z-index:1;pointer-events:none;inset:-20%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.009 .013' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -9 0 0 0 1.5'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E");opacity:.42}
.ub-idea .ub-pin2{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.5rem,4vh,3rem);min-height:100svh}
.ub-idea__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem}
.ub-idea__head .ub-h{font-size:clamp(1.5rem,2.6vw,2.7rem);letter-spacing:-.02em}
.ub-idea__name{margin:0;font-weight:700;font-size:clamp(1rem,1.4vw,1.4rem)}
.ub-line{margin:0;font:700 clamp(3.1rem,min(10.4vw,18.5svh),13rem)/.92 'DM Sans',Arial,sans-serif;letter-spacing:-.05em}

/* ---------- Banner + film ---------- */
.ub-film{background:var(--night);color:#fff}
.ub-banner a,.ub-board a,.ub-trophy a,.ub-posts a{display:block}
.ub-banner,.ub-film__scale{position:relative;z-index:2}
.ub-banner img{width:100%;height:auto}
.ub-film__scale{transform-origin:50% 0}
.ub-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.ub-player figcaption{background:var(--night);display:flex;justify-content:space-between;gap:1rem;padding:1rem var(--g);font-size:.9375rem}
.ub-player figcaption a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- Ejecución ---------- */
.ub-ejec{padding:clamp(5rem,10vw,10rem) var(--g);display:grid;gap:clamp(1.5rem,3vw,3rem);overflow:hidden}
.ub-ejec .ub-h{font-size:clamp(1.5rem,2.6vw,2.7rem);letter-spacing:-.02em}
.ub-swap{font:700 clamp(6rem,30vw,34rem)/.86 'DM Sans',Arial,sans-serif;letter-spacing:-.07em;display:flex;color:var(--clay);margin:0 0 .22em -.04em;white-space:nowrap}
.ub-slot{position:relative;display:block;width:.5em;clip-path:inset(0 -.1em -.26em)}
.ub-slot b{position:absolute;left:0;top:0;width:100%;text-align:center;font-weight:700}
.ub-z{display:none}
.ub-y{color:var(--pool2)}
html.ub-js .ub-z{display:block}
html.ub-js .ub-y{transform:translateY(150%)}
.ub-ejec .ub-lead{justify-self:end;max-width:min(26em,100%)}

/* ---------- Posts wall ---------- */
.ub-wall{background:#3a4149;--h:min(100svh,calc(100vw*.8))}
.ub-wall .ub-pin2{padding:0}
.ub-wall__scroll{overflow-x:auto}
.ub-wall__scroll::-webkit-scrollbar{height:10px}
.ub-wall__scroll::-webkit-scrollbar-track{background:#0003}
.ub-wall__scroll::-webkit-scrollbar-thumb{background:#fff9}
@supports not selector(::-webkit-scrollbar){.ub-wall__scroll{scrollbar-color:#fff9 #0003}}
.ub-posts{width:max-content}
.ub-posts img{height:var(--h);width:auto}
html.ub-js .ub-wall{--h:100svh;height:calc(100svh + var(--h)*3.598 - 100vw)}
html.ub-js .ub-wall .ub-pin2{background:#45423f;position:sticky;z-index:2;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
html.ub-js .ub-wall__scroll{overflow:visible}
/* A wide link cannot draw a whole ring on screen, so the ring is drawn on the frame itself. */
.ub-posts a:focus-visible,.ub-trophy a:focus-visible{outline:none}
.ub-wall .ub-pin2:has(a:focus-visible)::after,.ub-sol .ub-pin2:has(a:focus-visible)::after{content:"";position:absolute;inset:6px;z-index:5;border:4px solid var(--ink);box-shadow:0 0 0 3px #fff,inset 0 0 0 3px #fff;pointer-events:none}
.ub-wall .ub-pin2:has(a:focus-visible),.ub-sol .ub-pin2:has(a:focus-visible){position:relative}
html.ub-js .ub-wall .ub-pin2:has(a:focus-visible),html.ub-js .ub-sol .ub-pin2:has(a:focus-visible){position:sticky}
@media(max-width:700px){
 .ub-line{font-size:14.4vw}
 html.ub-js .ub-wall{--h:76svh}.ub-wall{--h:70vh}
 /* The picture's own blurred edge is drawn on upwards and downwards: no grey bands, no seam. */
 html.ub-js .ub-posts{position:relative}
 html.ub-js .ub-posts::before,html.ub-js .ub-posts::after{content:"";position:absolute;left:0;right:0;height:13svh;background:url(/assets/originals-v4/isdin/m005-1135682921.webp) 0 0/100% calc(var(--h)*14) no-repeat;transform:scaleY(-1);pointer-events:none}
 html.ub-js .ub-posts::before{bottom:calc(100% - 1px)}
 html.ub-js .ub-posts::after{top:calc(100% - var(--h)*.0055);background-position:0 calc(100% + var(--h)*.0735)}
}

/* ---------- El Sol ---------- */
.ub-sol{background:#fff;overflow:clip;--w:min(320svh,366vw);--ih:calc(var(--w)*.2779)}
.ub-sol .ub-pin2{padding:0;position:relative;height:calc(var(--ih)*.98)}
.ub .ub-trophy{position:absolute;left:50%;top:50%;width:var(--w);margin-left:calc(var(--w)*-.54);transform:translateY(-50%)}
.ub-trophy img{width:100%;height:auto}
html.ub-js .ub-sol{height:190svh}
html.ub-js .ub-sol .ub-pin2{position:sticky;top:0;height:100svh;overflow:hidden}

/* ---------- Facts + next ---------- */
.ub-facts{padding:clamp(3rem,6vw,6rem) var(--g);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem var(--g);background:var(--sand)}
.ub-facts h2{font:700 .9375rem/1.2 'DM Sans',Arial,sans-serif;color:var(--clay-text);margin:0 0 .9rem}
.ub-facts p{margin:0 0 .75rem;font:700 clamp(1.3rem,2.2vw,2.2rem)/1.12 'DM Sans',Arial,sans-serif;letter-spacing:-.02em}
.ub-facts .original-context,.ub-facts p:has(>a){font:400 .9375rem/1.45 'DM Sans',Arial,sans-serif;letter-spacing:0;color:#4b4638}
.ub-facts a{text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding:.5rem 0}
.ub-board{grid-column:1/-1;background:#fff}
.ub-board img{width:100%;height:auto}
.ub-board a{display:block;padding:0;position:relative;text-decoration:none}
.ub-board a::after{content:attr(data-board-label);position:absolute;right:1rem;bottom:1rem;padding:.5rem .8rem;background:var(--ink);color:#fff;font-size:.875rem}
.ub a.ub-next{color:#fff}
.ub-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:var(--g);padding:clamp(3rem,7vw,7rem) var(--g);background:var(--night);color:#fff;text-decoration:none}
.ub-next>div{display:grid;gap:1rem;justify-items:start}
.ub-next span{font-size:.9375rem}
.ub-next strong{font:700 clamp(3rem,8vw,9rem)/.9 'DM Sans',Arial,sans-serif;letter-spacing:-.05em}
.ub-next .case-next-arrow{font-size:clamp(2rem,4vw,4rem);line-height:1}
.ub-next figure{overflow:hidden}
.ub-next img{width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ub-next:hover img,.ub-next:focus-visible img{transform:scale(1.03)}

@media(prefers-reduced-motion:reduce){.ub-next img{transition:none}.ub-next:hover img,.ub-next:focus-visible img{transform:none}}

/* ---------- Pinned variants ---------- */
html.ub-js .ub-tension{height:230svh}
html.ub-js .ub-tension .ub-pin2{position:sticky;z-index:2;top:0;height:100svh;overflow:hidden;padding-top:clamp(1rem,3vh,2rem);padding-bottom:clamp(1rem,3vh,2rem)}
html.ub-js .ub-idea{height:210svh}
html.ub-js .ub-idea .ub-pin2{position:sticky;top:0;height:100svh}
html.ub-js .ub-idea::before{animation:ub-drift 50s linear infinite alternate}
html.ub-js .ub-line .w{opacity:.28}
@keyframes ub-drift{to{transform:translate3d(-6%,-4%,0)}}

@media(max-width:900px){
 .ub-board a::after{position:static;display:block;text-align:right}
 .ub-tension .ub-pin2{grid-template-columns:minmax(0,1fr);align-content:center;gap:1rem}
 .ub-beach{order:0;margin:0 auto;width:min(100%,38svh)}
 .ub-60{font-size:min(clamp(6rem,26vw,16rem),17svh)}
 .ub-facts{grid-template-columns:minmax(0,1fr)}
 .ub-next{grid-template-columns:minmax(0,1fr)}
 .ub-intro{grid-template-columns:minmax(0,1fr)}
 .ub-intro .case-watch{justify-self:start}
 .ub-reto .ub-h{margin-bottom:4rem}
 html[lang=en] .ub-reto .ub-h{margin-bottom:5.2rem}
 .ub-reto .ub-lead{max-width:100%}
 .ub-swap{font-size:29vw}
}
/* Large phones and tablets: the copy keeps clear of the parasol instead of running over it. */
@media(min-width:420px) and (max-width:900px){.ub-reto .ub-lead{max-width:68vw}}
/* A phone on its side gets the plain page: the umbrellas go beside the copy instead of shrinking above it. */
@media(max-width:900px) and (orientation:landscape){
 .ub-tension .ub-pin2{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
 .ub-beach{order:2;width:min(100%,82svh);margin:0 0 0 auto}
 .ub-60{font-size:min(16vw,34svh)}
}
/* Phones and portrait tablets: the whole plaza is on the first screen, type below it. */
@media(max-aspect-ratio:1/1){
 html.ub-js .ub-pin{
  --fs:min(22.8vw,13svh);--bar:104px;--block:calc(var(--fs)*1.62 + 5.6rem);
  --hs:min(147.9vw,calc((100svh - var(--block) - var(--bar))/.6874));
  --ws:max(calc(var(--hs)*1.9523),115vw);
  --tx:clamp(100vw - var(--ws),50vw - var(--ws)*.4983,var(--ws)*-.13);
  --ty:calc((var(--bar) + 100svh - var(--block))/2 - var(--ws)/1.9523*.4623);
 }
 html.ub-js .ub-pin::before{height:var(--bar);background:var(--hot2)}
 html.ub-js .ub-top{left:var(--g);right:var(--g);top:66px;justify-content:space-between;background:none;padding:0}
 html.ub-js .ub-rub{left:var(--g);right:var(--g);width:auto;bottom:.9rem;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem .35rem .35rem 1rem;background:var(--cream)}
 html.ub-js .ub-rub__btn{white-space:nowrap}
 html.ub-js .ub-top{text-shadow:none}
 html.ub-js .ub-stage.is-safe .ub-rub{right:auto;min-height:0;padding:.75rem 1rem}
 .ub-rub p{font-size:.8125rem;line-height:1.15}
 html.ub-js .ub-title span,html.ub-js .ub-title span:last-child{left:calc(var(--g) - .03em)}
 html.ub-js .ub-title span:first-child{bottom:calc(5.1rem + .82em)}
 html.ub-js .ub-title span:last-child{bottom:5.1rem}
 html.ub-js .ub-pin::after{height:calc(var(--fs)*1.62 + 7.5rem)}
 html.ub-js .ub-intro{left:var(--g);right:var(--g);bottom:auto;width:auto;top:0;background:none;padding:0;gap:.5rem}
 html.ub-js .ub-intro p{font-size:clamp(1.05rem,2.9svh,1.7rem);line-height:1.22}
 html.ub-js .ub-caption{opacity:0;transition:opacity .3s}
 html.ub-js .ub-stage.is-band .ub-caption{opacity:1}
 /* With the keyboard on the first screen, the intro opens as a card in the free space, over nothing it needs. */
 html.ub-js .ub-stage:not(.is-band) .ub-intro:focus-within{transform:none!important;top:calc(var(--bar) + .5rem);background:var(--hot2);padding:1rem}
}
@media(forced-colors:active){html.ub-js .ub-sun{display:none}}