:root{--sans:'Bricolage Grotesque',system-ui,sans-serif;--ink:#1A1510;--ink-2:#625F5A;--ink-3:#716E69}
#fstorycard .fs-dot{position:relative;overflow:hidden;cursor:pointer;border:none;padding:0;height:4px;width:34px;border-radius:99px;background:rgba(20,16,11,.16);transition:background .4s,width .4s}
#fstorycard .fs-dot[data-on="1"]{width:48px;background:rgba(20,16,11,.2)}
@keyframes fsswap{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.fsswap{animation:fsswap .6s cubic-bezier(.16,.84,.44,1)}
#fstorycard .fs-photo.fsswap{animation:fsswap .6s cubic-bezier(.16,.84,.44,1)}
#fstorycard .fs-logobox{display:flex;align-items:center}
@media(max-width:760px){
  #fstorycard{grid-template-columns:1fr !important;padding:22px !important;gap:0 !important}
  /* photo rides next to the name as a round avatar on phones; big photo hidden */
  #fstorycard .fs-photo{display:none !important}
  #fstorycard .fs-ava{display:block !important}
  #fstorycard .fs-quote{font-size:15px !important;line-height:1.4 !important}
  #fstorycard .fs-logobox{height:34px !important;width:150px !important}
  #fstorycard .fs-logobox img{max-height:100%}
  
  #fstorycard .fs-name-role{margin-top:18px !important;padding-top:0 !important}
}
/* mirrors site.css so the preview matches the embedded render */
@media(max-width:860px){.two{grid-template-columns:1fr !important}}
@media(max-width:560px){.sec-pad{padding-left:18px !important;padding-right:18px !important}}