.rola{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:max-content;max-width:100%;
  margin:clamp(22px,3.4vw,38px) 0 0;text-decoration:none;opacity:0;animation:rola-in 1.2s cubic-bezier(.22,.61,.36,1) 1.7s forwards}
.rola-t{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(1rem,1.4vw,1.2rem);
  line-height:1.25;color:#EAF3EF;letter-spacing:.01em;text-shadow:0 1px 16px rgba(0,0,0,.6);transition:color .4s}
.rola-l{position:relative;display:block;width:8px;height:40px;margin-left:2px;background:rgba(255,184,77,.30);overflow:hidden;
  clip-path:polygon(0 0,100% 0,calc(50% + .5px) 100%,calc(50% - .5px) 100%)}
.rola-l::after{content:"";position:absolute;left:0;top:0;width:100%;height:46%;
  background:linear-gradient(transparent,#FFB84D);animation:rola-d 2.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes rola-d{0%{transform:translateY(-100%)}70%,100%{transform:translateY(220%)}}
@keyframes rola-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rola:hover .rola-t,.rola:focus-visible .rola-t{color:#FFD98A}
.rola:focus-visible{outline:1px solid #FFB84D;outline-offset:8px}
 
@media(max-width:700px){.rola{position:absolute;right:var(--gutter,1.4rem);bottom:64px;margin:0;align-items:flex-end;max-width:118px;gap:8px}
  .rola-t{font-size:.96rem;text-align:right}.rola-l{height:30px;margin:0 3px 0 0}}
@media(prefers-reduced-motion:reduce){.rola{animation:none;opacity:1}.rola-l::after{animation:none;transform:translateY(60%)}}